Page Menu drop down modification - remove arrows & extra space
Hi,
I am using the page menu and would like to remove the little arrows that appear when you add sub-pages, as well as the extra space created for the little arrows. I found the area in the code that calls the arrows, and i've removed them successfully, however the space allocated for the arrows is still there and I don't know how to remove it. Help is appreciated. Thanks! |
Add as CSS Insert
HTML Code:
div#menu1 ul.rMenu li.rMenu-expand a, |
Thanks a million! This was driving me nuts.
|
A couple of quick questions on this:
1) how do we actually remove the arrows? 2) is it possible to move the subpages drop down to the right next to the parent page (or vertically below instead of below and to the right) Thanks |
You would have to edit style.css changing
HTML Code:
padding-right: 15px; HTML Code:
padding-right: 5px; And delete in header.php lines starting with PHP Code:
PHP Code:
|
Thanks for this
Is changing the right padding to 5 supposed to make the menu drop-down exactly under its heading? It doesn't have that effect. If not what do I need to change to achieve that? Thanks |
The padding is just the distance between an elements border and its content
<LI><--- 5 px here ---><A HREF="...">...</A><--- 5px here ---></LI> With images the right padding is 15 instead of 5px to make room for the image. The styles form above is setting back the right padding to 5px after the image was removed. This should not affect the alignment of sub menus. Post a URL please if this does not solve your issue |
mascoma.com.cy
In the page navigation menu (top not left) I am trying to get "Domestic Line" and "Hotel Line" sliding directly under "Products" (or next to it i.e. rolling over Products would make the menu appear to the right) It would be interesting to know how to format this menu so I can try moving it around Thanks again |
You've set more margin between the first level menu items and that left margin of the first level items is being applied to the sub level items as well. Reset the sub items a CSS insert
HTML Code:
ul.rMenu-ver ul.rMenu-hor li { HTML Code:
ul.rMenu-ver { |
This doesn't seem to make a difference to the look.
Just to be on the same page, I removed this code from CSS inserts Code:
div#menu1 ul.rMenu li.rMenu-expand a, Code:
ul.rMenu-ver ul.rMenu-hor li { Code:
ul.rMenu-ver { And to give you a full picture, here is my full CSS inserts code: Code:
ul#rmenu2 { Thanks for your patience! |
Post a URL please
|
|
You're missing the closing brackets
ul.rMenu-ver ul.rMenu-hor li { margin-left: 0; } ul.rMenu-ver { margin-top: 1px; } |
1 Attachment(s)
Unfortunately I am not getting the effect I need which can be seen in the attached jpg file below (minus the colour problems due to photoshop editing)
Again, my css inserts Code:
ul#rmenu2 { Thanks again |
Try this as HTML/CSS Inserts -> CSS Insert
HTML Code:
div#menu1 ul.rMenu-ver { |
Excellent! Works as required
Thanks for your support and patience! |
Morning, all...
Hey Flynn - since the upgraded version, I can't find the arrow code to remove in header.php Help? Best, M. |
what version were you on?
|
3.4.1
And I'm entering this sentence 'cause the board said my post was too short. :) |
Bump... any ideas on this?
Thanks again. M. |
How do I remove the drop down arrows (and right spacing) in version 3.4.4. nothing I see here seems to work for me
|
if we are talking about the down arrows next to the parrent menu item and the left arrow there are two ways an easy and a not as easy.
the not so easy way would be to put in a CSS Insert for all the places it's used and a rule 'background-image: none;'. Now for the expand left these are the CSS Selectors HTML Code:
ul.rMenu-vRight li.rMenu-expand a, |
This did not work is it missing a } ?
|
oh, that was not a complete solution, just an example of SOME of the CSS Selectors that would be needed. If you want the whole list, view the source of a generated page (I suggest that you set ATO->Configure CSS & JS->Configure CSS & JS to INTERNAL and ATO->Configure CSS & JS->CSS: Compress? to NO - makes it easier to read) and search for
expand-right.gif expand-right-white.gif expand-left.gif expand-left-white.gif expand-down.gif expand-down-white.gif and copy the selectors using each ond and add the rule 'background-image: none;' to each group |
No I made the arow icons 1 pixel (and the are gone now) but there is still right space on the place the arow use to be, how do I get rid of this space (about 5 pixels) ?
|
I searched high and low for a solution to set the margin and padding of the dropdown menu sub items and found it here. Great! Thanks!
This did it for me: HTML Code:
div#menu1 ul.rMenu-ver li { |
These issues are SOLVED
I'm having trouble with this. Site: http://www.artcurvedstraight.org/home - My images have all been replaced with 1x1. - I have tried the above in post #26. But, Firebug is still telling me that my right-padding is 15. This really throws off the appearance of the menus. I've learned a lot about styling menus in Atahualpa over the last few days, but this is the final hurrah for me. Questions: 1. SOLVED: How can I reduce the right padding on ALL of my li items in the menus, both horizontal and vertical? taken from: http://forum.bytesforall.com/showthread.php?t=6033 /*---drop down arrows-----------------------------------*/ div#menu1 ul.rMenu-hor li.rMenu-expand a { background-image: none; padding-right: 3px !important; } div#menu2 ul.rMenu-hor li.rMenu-expand a { background-image: none; padding-right: 3px !important; } 2. (please please ;) ) How can I reduce the sub-menu width of 7 to less than 7? You will see on my site the width throws off the design, as I have observed on other Atahualpa sites as well. The edges just stick out too far. 2a. SOLVED: Alternately, could I style ALL of the parent items to match that width of 7, so the red outlines lined up, and all menu items were a standard width? taken from: http://forum.bytesforall.com/showthread.php?t=1986 ul.rMenu li {width: 11em;} Any advice please? Flynn/Juggledad or any other users? Thanks so much! Josh |
so are you all set?
|
Not quite. I still would really like to be able to do this:
2. (please please ) How can I reduce the sub-menu width of 7 to less than 7? You will see on my site the width throws off the design, as I have observed on other Atahualpa sites as well. The edges just stick out too far. but I think the answer will be I can't? is it possible through a php hack? I'm enjoying getting through this stuff, and posting my answers as I go. thanks! |
Hello,
I am sorry if this was explained earlier but my coding is not up to par...I am trying to move my subpage icon. As I click on the parent page my submenu appears just fine but the subpage is down and to the right and it is 1 out of 10 that I can access that submenu....quite frustrating...So can I move the submenu to be able to click on it more easily? |
What version of Atahualpa? What version of WP?
What is your URL? are you using a custom WordPress or Atahualpa menu? Is this the page or cat menu? what do you have in the 'Configure Header area' option? |
Perhaps on the next version, removing the arrows entirely could be an option, since none of my customers have ever wanted them.
I was hoping against hope that .page_item page-item-11{ width:125px; } would standardize them all, but no such luck.:( |
All times are GMT -6. The time now is 12:00 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.