Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Old Apr 4, 2013, 02:19 PM
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 02:10 PM. Reason: tried to make my question clearer in hopes of getting an answer
Old Jun 5, 2013, 08:20 AM
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;

/* 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 */


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 06:44 AM
[SOLVED] Stretch the menu items to the full width of the page freelancekonsulenten Page & Category Menu Bars 3 Mar 21, 2011 03:41 PM
How to justify cat-mnu items over full width? Carlo Page & Category Menu Bars 6 Feb 10, 2011 02:58 PM
Changing the width of Child Menu items fslamang Page & Category Menu Bars 1 Feb 10, 2011 02:33 PM
[SOLVED] page-center and cat-center to fill the width of the site cway Page & Category Menu Bars 2 Oct 25, 2010 11:30 AM

All times are GMT -6. The time now is 11:46 PM.

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