Changing Menu Background Width to 100%

  • Resolved eric_s

    (@eric_s)


    12 years, 3 months ago

    I would like to make the background for sub-menu (dropdowns for second, third, etc. levels) to 100% of the menu Navigation Label text width and I am unsure of where to change this or what I would put into a custom.css file.
    See screenshot of menu here:

    https://www.mediafire.com/view/?ge3v5pa517ha66a

    The submenus seem to inherit the Navigation Label menu background width from the first dropdown level (I think that would be called the second level menu). I have another submenu background that is wider where the Navigation Label text is wider but it still isn’t 100%:

    https://www.mediafire.com/view/?2a57206oydn20hf

    So, I think I need to make 2 changes, one to allow the first level submenu background expand to 100%, and also to allow the third or greater levels to expand to 100%, and/or to stop inheriting the width from the level above it.

    Hope I explained this right. I’m kinda guessing some of this I’m a bit of a novice at css and theme modification but would appreciate any assistance.

    Thank you
    -Eric

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author David Carson

    (@davidtcarson)

    I’ll adress the longer sub-menu names in next release of theme. Thanks for finding this.

    In the meantime, you might try adding the following to your stylesheet (preferably custom.css). 

    #nav .sfhover ul li,
#nav *:hover ul li {
    width: 110%;
}

#nav li .sub-menu li a {
    width: auto;
}

    I haven’t tested this but it might help get you going in the right direction.

    Thread Starter eric_s

    (@eric_s)

    Thank you David I created custom.css with your code and that works.

    I did add a minimum width so that the shorter Navigation Labels all lined up evenly, seems to look a bit better to me. My custom.css looks like this now:

    #nav .sfhover ul li,
#nav *:hover ul li {
    width: 110%;
}

#nav li .sub-menu li a {
    min-width: 180px;
    width: auto;
}

    Thanks again!

    Theme Author David Carson

    (@davidtcarson)

    Sure thing. Good call with the min-width.

    Thank you for using the theme and reporting this.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing Menu Background Width to 100%’ is closed to new replies.