Menu label (category) width customize

  • Unknown's avatar
    manoganesan · Member ·

    Hi there,
    pls help me how can i customize the menu navigation in one line with customization width css also how the menu drop down background color could change. i used Chronicle theme.

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @manoganesan!

    There are enough items in your menu that on some screen sizes, you’ll always have a second line. Even if we decrease the width, there isn’t going to be enough room for them all on some screens.

    This CSS should narrow them down as much as possible:

    .menu-primary .menu li.page_item_has_children>a,
.menu-primary .menu li.menu-item-has-children>a {
    padding-right: 10px
}
.menu-primary .menu li a {
    padding: 7.5px 0;
}
.menu-primary .menu ul ul li a {
    padding: 7.5px 20px;
}
.menu-primary .menu ul li a:before {
    margin-right: 5px
}
.menu-primary .menu li.page_item_has_children>a:after,
.menu-primary .menu li.menu-item-has-children>a:after {
    right: -2px
}

    The other option would be to try and consolidate some of the options under a single dropdown?

    also how the menu drop down background color could change

    There are three parts to this:

    – the background color
    – the triangle that appears at the top of the menu (same color)
    – the lines between the items

    These styles should change those colors:

    /* Dropdown Background Color*/
.menu-primary .menu li ul {
    background-color: #ddd;
}
.menu-primary .menu li ul:before {
    border-bottom-color: #ddd;
}

/* Dropdown border-bottom color */
.menu-primary .menu  li ul li {
 	border-bottom: 1px solid #eee   
}

    You might also want to change the color of the text on those menus:

    /* Dropdown link color */
.menu-primary .menu li ul li a {
    color: #333;
}

    You can change any of the colors by replacing the values I’ve used with your own HTML color code :)

  • Unknown's avatar
    manoganesan · Member ·

    Thanks Mr. staff-loquaciousloon

    the codes you provided made my site good look, thanks a lot, i requesting another help from you, it’s codes for header slide show and add a copy write footer credit.

  • staff-loquaciousloon · Staff ·

    You’re welcome!

    Feel free to open a new thread with the details of your next question :) I’ll mark this topic as Resolved for you!

  • The topic ‘Menu label (category) width customize’ is closed to new replies.