Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

autoadjust width of menu items to fill page width


  #1  
Old Apr 4, 2013, 01:19 PM
rainbow
 
13 posts · Apr 2013
I'm trying to get my horizontal menu button width to resize automatically. However many buttons (i.e. nav menu items) I have, I'd like the width to adjust automatically so they space themselves to fill the full page width. I found a solution to extend the menu bar (i.e. background color) the full width of the page, but I have not been able to get the menu items to expand into it. Since I want to keep the layout responsive, and may be adding menu items in the future, it would be nice if I didn't have to do this manually with padding and margins.

I tried juggledad's solution:

div#menu1 ul#rmenu2 li.menu-item {width: 10%;} (changing this to 16% since I have 5 menu items)
div#menu1 ul#rmenu2 li.menu-item ul li {width: 100%;}

but the overall width of the menu didn't increase - instead, it caused the buttons to overlap each other. It's behaving a lot like there is a fixed width built in to the menu (it also doesn't wrap on a smaller screen size, which I'd like it to do - is that a separate issue?).

Can anyone give me a hand with this? Here's my site: http://mihansa.net

Thank you!

Last edited by rainbow; Apr 11, 2013 at 01:10 PM. Reason: tried to make my question clearer in hopes of getting an answer
  #2  
Old Jun 5, 2013, 07:20 AM
keith_h
 
21 posts · Jun 2013
What was done in my case and worked fine although its not automatic..

/* the bar across the screen and border */
#bfa_page_menu {border: solid 2px #000; background-color: #A50D12;}
#bfa_page_menu div#menu1 {border:solid 2px #A50D12;} /* removes the bar at either end of the menu*/

/* format the text */
ul.rMenu li a {
color:#fff!important; /* white */
font: 14px arial,helvetica,lucida sans !important;
text-transform:uppercase;
}

/* and spread them out */

div#menu1 ul.rMenu li a {
padding-left: 35px;
padding-right: 35px;
}

#menu1 .rMenu-ver {
line-height: 1.2em !important; /* This adjusts the height of items in the menu and submenu */

Bookmarks

Tags
expand, menu, responsive, width, wrap

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem: Width of sub-menu items is not 100% logocar3 Page & Category Menu Bars 6 Dec 5, 2011 05:44 AM
[SOLVED] Stretch the menu items to the full width of the page freelancekonsulenten Page & Category Menu Bars 3 Mar 21, 2011 02:41 PM
How to justify cat-mnu items over full width? Carlo Page & Category Menu Bars 6 Feb 10, 2011 01:58 PM
Changing the width of Child Menu items fslamang Page & Category Menu Bars 1 Feb 10, 2011 01:33 PM
[SOLVED] page-center and cat-center to fill the width of the site cway Page & Category Menu Bars 2 Oct 25, 2010 10:30 AM


All times are GMT -6. The time now is 01:09 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.