autoadjust width of menu items to fill page width
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! |
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 */ |
All times are GMT -6. The time now is 06:13 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.