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 »

Page menu bar buttons the same flexible width like fluid layout


  #1  
Old Feb 7, 2009, 09:28 AM
Tigger
 
35 posts · Feb 2009
Hi Flynn,

I centered the page menue bar. I pasted the code into the php file like described in Thread http://forum.bytesforall.com/showthread.php?t=122 . As your posted code text is a bit wider than the screen, you have to scroll to copy it all from the thread. And that creates a bug when you paste it into your php. When copying, it is missing a bit of the code which should be pasted into line 12 !!!

<div class="clearfix rMenu-center">

Just for everybody else to know, that you manually have to add this piece of code afterwards by hand typing.

I have now the page menu bar with few buttons hanging in the middle. Is it possible, to make these buttons expand to the whole screen width ? Like that, I would have a full navigatin bar and not just few buttons hanging in the center. Every button would get the same width, automatically (fluid) changing with the bowser width.

One more comment: When you delete the home button from the page menue bar by leaving the field blank in the theme options, wp is still displaying this generated button field for "home". As this button field is empty, it just gets a width of 0 and is not visible. But in fact, the dashed line of the field is visible. The result is, that you have 2 dashed lines at the very left side of your page navigation menue (sort of a double line). How can I delete one of them ?

By watching few users pages I could see, that this problem appears on many userīs pages. It is just not easy to notice, as it is just a small 1px line at the left side of the navigation bar.
  #2  
Old Feb 7, 2009, 12:13 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You're right about the two borders on the left, but they're not caused by an empty <li>...</li> for a "Home" tab that was turned off, but by the left border of the menu bar plus the left border of the first menu tab on the left. The menu bar's left border can be turned off with

HTML Code:
ul.rMenu {
border-left: none;
}
Thank you for noticing that, I'll add it to 3.2.1

Or are you seeing an empty <li>..</li> in the source code in your browser?

================

Re: Centering Page Menu Bar http://forum.bytesforall.com/showthread.php?t=122

At first I could not replicate your copy / paste problem. I could easily copy every line including the long one, be it by highlighting it with the mouse or by clicking into the code area and pressing Ctrl+A. That was with Firefox. Then I tried IE7 and bummer... you're right. I broke that into two lines now and added a notice to that thread plus a sticky thread about the general IE7/single scrollbar code line copy problem. Thank you for noticing that as well.

================

Re: Menu tabs whole width: That would be a bit troublesome I think, to bring that in line with all browsers. At least with the "expanding to whole width" part. You should however be able to give them more width (all the same) with a CSS Insert such as

HTML Code:
ul.rMenu-hor li {
width: 15em;
}
To center the text inside add

HTML Code:
text-align: center;
  #3  
Old Feb 7, 2009, 05:04 PM
Tigger
 
35 posts · Feb 2009
Hi Flynn,
I pasted the code into CSS Field to remove left border of page menu bar. But nothing happened. Above I had the code for centering the page menu bar already inserted. So I mixed them together. The result is working:

ul#rmenu2 {
border: 0;
}
div.rMenu-center {
border: dashed 1px #ccc;
border-left: none;
}
  #4  
Old Nov 12, 2009, 06:42 AM
hospitalera
 
72 posts · Mar 2009
Prague
I would love to get such a fluid width page menu working for my new site, I am using Atahualpa 3.4.4 with it. Any ideas if it is possible, I have my page menu already centered, but it looks a bit "untidy" as it doesn't stretch for the whole layout. Thanks for your help, SY
__________________
Hospitalera's Blog
  #5  
Old Apr 7, 2010, 04:42 PM
jtsharp
 
23 posts · Mar 2010
A bump for this topic - have there been any updates allowing for a fluid width page menu? I'd love to have my links stretched evenly across the entire page rather than compactly centered in the middle. Here's the url: http://www.drjeremysharp.com. Thoughts?
  #6  
Old Apr 8, 2010, 07:43 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
A far as I am aware, there hasn't been any change to this area.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old May 14, 2011, 12:58 PM
damian
 
22 posts · Feb 2010
I was able to get my page menu to fill the container with the following CSS insert:

Code:
/* ================================================== */
/* How to increase width of menu items   */
/* ================================================== */

div#menu1 ul.rMenu li a:link, 
div#menu1 ul.rMenu li a:hover, 
div#menu1 ul.rMenu li a:visited, 
div#menu1 ul.rMenu li a:active {
padding: 2px 66px; /* _px top/bottom, _px left/right padding */
}
This is helpful, but the problem is that if the window is resized to be smaller than the container (as a user can do, and as the iPhone Safari browser forces), the menu items that don't fit get forced onto a second (or third) line. See http://www.damianmoskovitz.com and resize the window to see what I'm talking about.

Is there a way (perhaps with a CSS insert) to make the width or padding of each menu item decrease automatically when the window is resized to be smaller than the container (as the center column does by default) so that they all fit in the window on one line?

Thanks in advance for your help!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Creating buttons for the page menu Nourdmrolnmt1 Page & Category Menu Bars 5 Feb 2, 2012 01:03 PM
Another page menue bar with expanding and collapsing buttons Tigger Page & Category Menu Bars 4 Nov 6, 2009 07:17 AM
[SOLVED] Layout WIDTH vs. Layout Container Olivier Header configuration & styling 2 Jul 13, 2009 06:18 PM
how to extend the added image to your layout width in menu bars? and some other Q's ppat2 Page & Category Menu Bars 1 May 5, 2009 05:28 PM
[SOLVED] Howto: Align page menu bar with left sidebar or opacity overlay width iroQuai Page & Category Menu Bars 1 Mar 7, 2009 05:01 PM


All times are GMT -6. The time now is 12:13 AM.


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