WordPress.org

Ready to get started?Download WordPress

Forums

Frisco for BuddyPress
[resolved] Changing Menu Background Width to 100% (4 posts)

  1. eric_s
    Member
    Posted 1 year 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:

    http://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%:

    http://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

  2. David Carson
    Member
    Theme Author

    Posted 1 year ago #

    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.

  3. eric_s
    Member
    Posted 1 year ago #

    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!

  4. David Carson
    Member
    Theme Author

    Posted 1 year ago #

    Sure thing. Good call with the min-width.

    Thank you for using the theme and reporting this.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic