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 »

Page Menu drop down modification - remove arrows & extra space


  #1  
Old Feb 23, 2009, 05:42 PM
dorigen
 
5 posts · Feb 2009
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!
  #2  
Old Feb 24, 2009, 11:32 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Add as CSS Insert

HTML Code:
div#menu1 ul.rMenu li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a 
    {
    padding-right: 5px;
}
default is 15px
  #3  
Old Feb 24, 2009, 09:46 PM
dorigen
 
5 posts · Feb 2009
Thanks a million! This was driving me nuts.
  #4  
Old Mar 19, 2009, 07:55 AM
yiorgos
 
13 posts · Feb 2009
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
  #5  
Old Mar 20, 2009, 04:22 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You would have to edit style.css changing
HTML Code:
padding-right: 15px;
to
HTML Code:
padding-right: 5px;
in line 2127, 2140, 2171, 2179 - may be different line numbers for you

And delete in header.php lines starting with

PHP Code:
background-image: url(<?php echo get_bloginfo('template_directory'); ?>/images/expand-right
or

PHP Code:
background-image: url(<?php echo get_bloginfo('template_directory'); ?>/images/expand-down
Each should appear 2 times
  #6  
Old Mar 25, 2009, 03:43 AM
yiorgos
 
13 posts · Feb 2009
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
  #7  
Old Mar 25, 2009, 11:02 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #8  
Old Mar 25, 2009, 04:48 PM
yiorgos
 
13 posts · Feb 2009
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
  #9  
Old Mar 25, 2009, 07:20 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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 {
margin-left: 0;
}
To move the sub menu container ul.rMenu-ver down a bit
HTML Code:
ul.rMenu-ver {
margin-top: 1px;
}
  #10  
Old Mar 26, 2009, 03:39 AM
yiorgos
 
13 posts · Feb 2009
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,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a 
    {
    padding-right: 5px;
}
and added
Code:
ul.rMenu-ver ul.rMenu-hor li {
margin-left: 0;
}
and
Code:
ul.rMenu-ver {
margin-top: 1px;
}
The only difference it makes is in the highlighting of the submenu (check site again)

And to give you a full picture, here is my full CSS inserts code:

Code:
ul#rmenu2 {
margin-left: 160px;
border: solid 1px #cccccc;
}
ul.rMenu-hor li {
margin-left: 30px;
font-family: arial,  sans-serif;
font-size: 12px;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}

ul.rMenu-ver ul.rMenu-hor li {
margin-left: 0;

ul.rMenu-ver {
margin-top: 1px;
Have I misunderstood your instructions?
Thanks for your patience!
  #11  
Old Mar 26, 2009, 05:08 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Post a URL please
  #12  
Old Mar 27, 2009, 02:16 AM
yiorgos
 
13 posts · Feb 2009
Hi Flynn
URL was posted in post #8 above as well http://www.mascoma.com.cy

Thanks
  #13  
Old Mar 27, 2009, 06:46 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
You're missing the closing brackets

ul.rMenu-ver ul.rMenu-hor li {
margin-left: 0;
}

ul.rMenu-ver {
margin-top: 1px;
}


  #14  
Old Mar 30, 2009, 04:00 AM
yiorgos
 
13 posts · Feb 2009
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 {
margin-left: 160px;
border: solid 1px #cccccc;
}
ul.rMenu-hor li {
margin-left: 30px;
font-family: arial,  sans-serif;
font-size: 12px;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}

ul.rMenu-ver ul.rMenu-hor li {
margin-left: 0;}

ul.rMenu-ver {
margin-top: 1px;}
What am I missing?
Thanks again
Attached Thumbnails
Click image for larger version

Name:	menu.jpg
Views:	1049
Size:	4.9 KB
ID:	71  
  #15  
Old Mar 30, 2009, 06:43 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Try this as HTML/CSS Inserts -> CSS Insert

HTML Code:
div#menu1 ul.rMenu-ver {
margin-top: 1px !important;
margin-left: 0px !important;
}

div#menu1 ul.rMenu-ver li {
margin-left: 0px !important;
}
  #16  
Old Mar 31, 2009, 04:51 AM
yiorgos
 
13 posts · Feb 2009
Excellent! Works as required

Thanks for your support and patience!
  #17  
Old Nov 10, 2009, 07:33 AM
interage
 
98 posts · Apr 2009
Morning, all...

Hey Flynn - since the upgraded version, I can't find the arrow code to remove in header.php

Help?

Best,

M.
  #18  
Old Nov 10, 2009, 07:58 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what version were you on?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #19  
Old Nov 10, 2009, 10:08 AM
interage
 
98 posts · Apr 2009
3.4.1

And I'm entering this sentence 'cause the board said my post was too short.
  #20  
Old Nov 16, 2009, 09:34 AM
interage
 
98 posts · Apr 2009
Bump... any ideas on this?

Thanks again.

M.
  #21  
Old Dec 3, 2009, 11:06 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
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
  #22  
Old Dec 3, 2009, 07:59 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-vRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a,
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a, 
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a, 
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a, 
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a, 
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a, 
ul.rMenu-hRight li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand a
another approach would be to edit the gifs and make them a 1x1px so it really won't show up.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Dec 7, 2009 at 09:46 AM.
  #23  
Old Dec 4, 2009, 12:35 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
This did not work is it missing a } ?
  #24  
Old Dec 4, 2009, 05:26 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Dec 7, 2009 at 05:36 AM.
  #25  
Old Dec 7, 2009, 01:38 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
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) ?

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Category Menu Bar: Subcategory Indicator Arrows MatthiasHeil Page & Category Menu Bars 14 Jan 13, 2011 08:42 AM
Too Much White Space at Top of Page-How Do I remove Mande Header configuration & styling 2 Aug 12, 2009 12:34 PM
[SOLVED] Page Menu Bar - Strange Space Occurring Between Menu Items NealSchaffer Page & Category Menu Bars 2 Jun 20, 2009 11:18 AM
[SOLVED] extra space between posts on homepage reallylost Post-Kicker, -Byline & -Footer 8 Jun 2, 2009 03:11 PM
Page Menu Drop Down Only Showing First 6 Child Pages LabbyRoad Page & Category Menu Bars 4 Mar 11, 2009 12:40 PM


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


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