Loading ...

Navigation widget list item styling | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Navigation widget list item styling
Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Edit navigation item

Required The name that will appear in the space navigation.
Required
Required
Required The url can point to an internal or external web page.
 
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Features and Functionality

Navigation widget list item styling

Subscribe to RSS
  • 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

  • Answered

    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!

Page 1 of 1 (10 items)