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 » Header configuration & styling »

[SOLVED] How to put line under pages menu or remove space above bar1


  #1  
Old Jan 9, 2012, 08:19 PM
TraciBunkers
 
32 posts · Jan 2012
I've got my header area set up with a custom widget that has my logo in it with a search box under it in 1 cell, and the other cell has a photo & link.

Under that is my menu bar, which I have shifted up and to the left so that the right edge aligns with the right edge of my logo.

Then I have bar1.

I'd like to have a line under that pages menu that is the same length as my logo.

I tried moving bar 1 up, but couldn't get it to work--I could only add space under it, not take any away above it.

I also tried adding an html horizontal rule in the widget cell with my logo & search box, but couldn't get it positioned correctly to show under the menu.

What is the best way to get a line under my menu bar, where I want it? Here's my test blog, where I'm setting things up.
  #2  
Old Jan 9, 2012, 10:28 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Here is some code as a start. It puts relative positioning on the wrapper div so you can absolutely position the menu. This brings some of the elements up that were being pushed down by the menu. You could similarly absolutely position a horizontal rule. The height of 0 eliminates the containing div.
HTML Code:
#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    left: 680px;
    top: 180px;
    height: 0;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jan 9, 2012, 10:37 PM
TraciBunkers
 
32 posts · Jan 2012
Thanks Larry,
I pasted it into my css inserts, and it didn't change anything.

I replaced "rmenu2 " with "rMenu", and that didn't change anything either . . . . .
  #4  
Old Jan 9, 2012, 11:01 PM
TraciBunkers
 
32 posts · Jan 2012
This is what I originally had in the css inserts to deal with the page menu:

Code:
/*moves page menu tabs over to the left*/
ul.rMenu li {
position: relative;
right: 227px;
bottom: 55px;
}
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}
I took it out, put in what you suggested, then played with the numbers. I now have this:

Code:
#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 130px;
    height: 0;
}
That basically has everything like it was with my previous code. Then, I was able to go in and style the bar1.

So thanks! Let me check a few more things. I don't like the arrows for dropdown, and when I put in the css insert to get rid of them, I couldn't get rid of the extra space. I found a thread on it, but what I tired didn't work. Any clues for that one?
  #5  
Old Jan 9, 2012, 11:13 PM
TraciBunkers
 
32 posts · Jan 2012
I've got it pretty much how I want it. Here's the styling for the bar:

Code:
height: 1px;
background: #ffffff;
border-top: solid 1px #cccccc;
margin-bottom: 25px;
margin-top: -17px;
width: 735px;
Here's what I have for the css inserts for the menu bar:
Code:
#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 143px;
    height: 0;
}
/*fixes dropdown menus to align correctly since I moved the menu bar*/
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}
now if I can get the spacing between the menu tabs fixed, I'll have the menu part all set.
  #6  
Old Jan 10, 2012, 06:15 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
If you are trying to do what I think you would just put a right margin on the list items for rmenu2
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Jan 10, 2012, 02:02 PM
TraciBunkers
 
32 posts · Jan 2012
I tried that, and it's not making a difference. So I'm not sure if I'm putting it on the wrong place. Here's what I've got:

Code:
#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 150px;
    height: 0;
letter-spacing:.05em;
padding-left:5px;padding-right:5px;
}
/*fixes dropdown menus to align correctly since I moved the menu bar*/
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}
I played with the padding numbers, and it didn't change anything.
  #8  
Old Jan 10, 2012, 08:36 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I don't see any code for margins on the list items such as the following.
HTML Code:
#rmenu2 li {
    margin-right: 10px;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Jan 10, 2012, 10:13 PM
TraciBunkers
 
32 posts · Jan 2012
I added that, and it moves the sub-menu items over to the left, but leaves the main menu items where they are--which isn't what I want. I want them all lined up, but I want to get rid of the extra space to the right of the main menu items w/ dropdowns caused from the arrows.

I can adjust the space between the main menu items, but I can't get it to be equal.

Last edited by TraciBunkers; Jan 10, 2012 at 10:27 PM. Reason: added more info
  #10  
Old Jan 10, 2012, 11:37 PM
TraciBunkers
 
32 posts · Jan 2012
I swear I tried this solution before, and it didn't work. But I might have had something else going on conflicting. Here's what worked (I put it in red only to show where it is):

Code:
/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
padding-right: 5px !important; 
	}
So here is the whole css insert for that part:

Code:
#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 150px;
    height: 0;
letter-spacing:.05em;
}


/*fixes dropdown menus to align correctly since I moved the menu bar*/
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
padding-right: 5px !important; 
	}

Bookmarks

Tags
bar1, line, menu bar

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Remove space padding between header widget (my slideshow) & menu bar? Athena account2 Header configuration & styling 6 Mar 27, 2011 06:03 AM
[SOLVED] How to remove the white space between header and pages Ber|Art Center area post/pages 7 Sep 30, 2010 04:32 AM
How to: Remove link from blog title & add a thin solid black line below the page menu SavingHumanity Header configuration & styling 6 Jul 2, 2010 05:20 PM


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


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