Trouble with navigation buttons...

[john_matrix]

Hi all,
wondering if anyone out there can help.
Ok,
here is a link to my site for starters: http://www.rerdownloads.com

These menu buttons you see at the top. I needed to align them (to where you see them) but it has left a big blue square. I did this in Custom Styles, just playing around with the code...what I could find out.

I added margin-left: 180px; in this code:

#nav.continuous ul li#menu-item-70 a {
width:100px;
margin-left: 180px;
text-indent:-9999px;
background-image:url('http://www.rerdownloads.com/wp-content/uploads/2011/06/buttons/ABOUT_up.jpg');}

As you can see it left the blank space blue. Not even sure what I did is right.

2 other things I really need help with:

i) The buttons seem to move left and right when you click on them. Not sure why this is. Is there anything I can do to stop this?
ii) I also need to add another button just to the left of the search box.
I have tried to do this using the same kind of code for the other buttons, in Custom Styles, but this did not seem to do anything.
I am confused as to where it says #nav.continuous ul li#menu-item-70 a {
Like, what is that number 70? and why is it that number? That is what is confusing me. I have uploaded the new button to the server.

Any help with these issues would be amazing. This is really killing me!!
thanks in advance
JM

[drake]

By adding at Custom Styles:

Code: Select all

 li#menu-item-70 {background:none;}

you will get rid of the blue background.

But maybe is better to set all things at Suffusion Options -> Skinning -> Navigation Menu Below Header.
There you can set background of menu without any custom CSS definition. Also there, by setting borders to be consistent on all states will disappear the sensation of moving. Now, you have a border for normal state, but when hover you change the borders - your menu is moving with 1 pixel. Set for all states an 1 px border and change only the color between states.

If you need a new button, and this is needed on the left, probably the better thing is to add it in right header widget area, not in menu.

#menu-item-70 is the id of your first menu item, #menu-item-2299 for the second, #menu-item-21 for the last - the numbers was generated dynamically when you created the menu. You can't control that. You can determine the id's with Firebug or other tool like it.

[john_matrix]

Thanks Drake..
hmmm adding
li#menu-item-70 {background:none;}
did nothing really.

I sorted out the "Navigation Menu Items Border" issue so thanks for the tip
The new button unfortunately does need to be in the menu....

I can remove the margin-left: 180px; command and it will get rid of the blue bit and move the buttons back to the left, but I ultimately will need them to be indented right a bit so not sure what to do about that.

"#menu-item-70 is the id of your first menu item, #menu-item-2299 for the second, #menu-item-21 for the last - the numbers was generated dynamically when you created the menu. You can't control that. You can determine the id's with Firebug or other tool like it."

okay, but how are these numbers generated? I just cant remember what I did to put these buttons in place. In fact, I believe you said for me to put them in Custom Styles but I cant remember if I had to do anything in CSS first...

thanks Drake, you always help me out good!!

JM

[sayontan]

okay, but how are these numbers generated?

As Drake said:

the numbers was generated dynamically when you created the menu. You can't control that.

That's all there is to it. WP generates those numbers.

[john_matrix]

Ok, I just cant remember how I created the menu. All I have are the buttons in my folder on the server

[sayontan]

Ok, I just cant remember how I created the menu.

Appearance -> Menus

[john_matrix]

Ahh okay thanks thats what I needed to know

Putting it on the page and clicking the new button - it kinda goes haywire :
http://www.rerdownloads.com/

here is the code in Custom Styles:

#nav.continuous ul li#menu-item-5638 a {
width:128px;
text-indent:-9999px;
background-image:url('http://www.rerdownloads.com/wp-content/uploads/2011/06/buttons/VISIT_ReR_MAIN_up.jpg');}
#nav.continuous ul li#menu-item-5638 a:hover {
width:1280px;
text-indent:-9999px;
background-image:url('http://www.rerdownloads.com/wp-content/uploads/2011/06/buttons/VISIT_ReR_MAIN_over.jpg');}

anything wrong in there?

Also - I need to move the buttons along to the right, so that they align to the right hand side of the logo.
And...The Visit ReR Main buttton needs to be just to the left of the search box.
Any ideas how this can be accomplished?

thanks
JM

[drake]

JM... just pay attention when you read or do something... Your menu flick as you have defined it's states:
#nav.continuous ul li#menu-item-5638 a {
width:128px;
..........
#nav.continuous ul li#menu-item-5638 a:hover {
width:1280px;
...............}
On the hover state it try to take a width of 1280 px - in 1000 px width of site... You can see the effect...

Also... I said to use Skinning -> Navigation Bar Below Header to solve the previous problem with alignment. If you set there a transparent background for navigation bar, probably your blue indent will dissapear.

Also - I said to use right header widget for your last button - put there a text widget with a link to the desired page (is the widget area which already contain the search box). In that way your new button can be easily aligned with the search box (if is not aligned by default) and the look will be the same as for others menu items.

[john_matrix]

Hi again, havent been back on for a while due to exams and coursework etc...

So..to this problem of the aligning buttons:

JM... just pay attention when you read or do something... Your menu flick as you have defined it's states:
#nav.continuous ul li#menu-item-5638 a {
width:128px;
..........
#nav.continuous ul li#menu-item-5638 a:hover {
width:1280px;
...............}
On the hover state it try to take a width of 1280 px - in 1000 px width of site... You can see the effect...

(thanks Drake - that worked - a simplel error on my part I failed to spot)

Also... I said to use Skinning -> Navigation Bar Below Header to solve the previous problem with alignment. If you set there a transparent background for navigation bar, probably your blue indent will dissapear.

Also - I said to use right header widget for your last button - put there a text widget with a link to the desired page (is the widget area which already contain the search box). In that way your new button can be easily aligned with the search box (if is not aligned by default) and the look will be the same as for others menu items

- Ok I tried this. It is still not working to how I want it. I tried to set a transparent background for the navigation bar but this seemed to do nothing.
The right header widget thing, I put the text widget in but it just placed (the) text over and got rid of the search box. I just wish there was a simple way of aligning the buttons.

[drake]

You can't hope that by just adding a text in that widget area you will have a button.... still need to style it... (also you added a simple text - a link need to be enclosed in <a> tags: <a href="http://www.rermegacorp.com">Visit ReR main site</a>).

But you can try something simple...

Go to Appearance -> Menus and create a new custom menu, named, let's say, "right-menu". On the little panel from the left named Custom Links add your link on the first line, and the label for showing in navigation bar on the second line. Click Add to Menu below. Save your new menu and go away from that page without any other change.
At Appearance -> Widgets add a Custom Menu Widget in the right header widget area. From drop-down of widget select: "right-menu". Save.

Now you have a link in right header widget area which inherit the classes and styles as any other menu item.

Probably the only further CSS style that you will need will be to adjust the width of right header widgets area, to fit your new link and the search box (inactive now). This line added at Custom Styles will solve that:

Code: Select all

#right-header-widgets {width:350px;}

Maybe you need to adjust those 350px, but you got the ideea.

Finally for your menu alignment, add also at Custom Styles:

Code: Select all

#nav .col-control {margin-left:178px;width:957px;}