Navigation widget list item styling | Communifire Support

In navigation widget -- would like to style the following way:

1. left justify the icons (instead of indenting)

2. When the text goes down to another line -- lining up the 2nd row of text with the beginning of text on the first row (instead of how it currently lines up with the icon)

Hi Sierra,

Below is the code to make those changes. Please add the code in Control Panel > System > CSS Overrides.

/*Changes for Default Unordered List template*/
/*Left justify icons*/
.axero-widget .axero-widget-content.axero-widget-content-padded.axero-entity-formatted-content ul {
    margin-left:15px;
}
/*Hanging indent*/
.axero-widget-advanced-nav-list .axero-widget-body ul li a i, .axero-widget-advanced-nav-list .axero-widget-body ul li a {
    margin-left: 15px;
    text-indent: -35px;
}
/*Adjust space around icon*/
.axero-widget-advanced-nav-list .axero-widget-body ul li a i, .axero-widget-advanced-nav-list .axero-widget-body ul li a i {
    margin-left: 0;
    padding-right: 20px;
}

The widget will look like this:

Grace

This looks much better -- but what CSS should be added to make the icons and text vertically aligned?

Hi Sierra,

Also add the following code.

/*Align icon with text*/
.axero-widget-advanced-nav-list .axero-widget-body ul li a i, .axero-widget-advanced-nav-list .axero-widget-body ul li a i {
    padding-top: 6px;
}

The widget will look like this:

Grace

This is great - thanks!

The hover now is a little wonky though.. see below.

what should I do?

Hi Sierra,

I see that the code above also affected the "Technology" widget. I'd like to make some changes to the page and CSS code to better target the widgets. I'll let you know when I've finished making changes.

Grace

Hi Sierra,

I added hanging-indent in Custom CSS class for the widgets with two lines of text.

And I updated the CSS to below.

/*Changes for Default Unordered List template*/
/*Left justify icons*/
.axero-widget .axero-widget-content.axero-widget-content-padded.axero-entity-formatted-content ul {
    margin-left: 15px;
}

/*Hanging indent*/
.axero-widget-advanced-nav-list.hanging-indent .axero-widget-body ul li a i,
.axero-widget-advanced-nav-list.hanging-indent .axero-widget-body ul li a {
    margin-left: 15px;
    text-indent: -35px;
}

/*Adjust space around icon*/
.axero-widget-advanced-nav-list.hanging-indent .axero-widget-body ul li a i,
.axero-widget-advanced-nav-list.hanging-indent .axero-widget-body ul li a i {
    margin-left: 0;
    padding-right: 20px;
}

/*Align icon with text*/
.axero-widget-advanced-nav-list.hanging-indent .axero-widget-body ul li a i,
.axero-widget-advanced-nav-list.hanging-indent .axero-widget-body ul li a i {
    padding-top: 6px;
}

The "Technology" widget is no longer affected by that code now.

I'm looking into a fix for the hover issue.

Grace

Hi Sierra,

I haven't found a way to fix the background hover color for the navigation widgets modified alignment. As a workaround, you can hide the background hover color altogether with the following CSS.

/*Disable background hover color for navigation widget with hanging indent*/
.hanging-indent.axero-widget-advanced-nav-list .axero-widget-body ul li a:hover {
    background-color: white!important;
}

Grace

Thanks!