Forums

Right align nav

Permalink
Hello all

I would like to have my navbar right aligned. I have been playing around with the css but having no luck. I have tried float:right and margin-left:auto; margin-right:0px;. Below is what I believe to be the css that controls the navbar, as I have edited the padding, etc and all works fine. I am using the Minima theme.
Any assistance would be greatly appreciated.
Thanks

#c5wrap ul#nav li a {
/* customize_main_nav */ font: normal normal 14px Arial; /* customize_main_nav */
/* customize_main_nav */ color:#8f8f8f; /* customize_main_nav */
padding: 10px; text-decoration: none;
}
 
goldhat replied on at Permalink Best Answer Reply
If you post the HTML we'll be able to have a better look at this. When you're trying to style something first you have to understand the markup. So it's not usually very useful to just look at the CSS and then try to guess what the markup is and make changes, unless you're only goal is to change a style that already exists. In this case, a style like ul#nav li a{} only effects the links inside the nav. It's too specific to be useful in any positioning.

Now with the example you provided, the only thing you could try is to target #c5wrap ul#nav directly and apply positioning to it such as:

#c5wrap ul#nav{
  float: right;
  background: red;
}


The background red is just so you can see if your style is being applied, though you can use an inspector as well if you are familiar with that.

Now normally navigation lists like this are wrapped inside divs. And #c5wrap is probably a div for your whole page so targetting that probably will have poor results. Again you've got to look at the markup or share it here, it's just a guessing game if you don't know what the markup is.

You should look for the divs right around the nav and then target them. Eventually you find one you can move with float or something else.
Cahueya replied on at Permalink Reply 1 Attachment
Try playing with the styles in Google Chromes' Dev Tools or Firefoxes Firebug first, you can easily see which changes create which behaviour.

The CSS of goldhat works perfectly fine, I've just applied it to the theme. (see attachment)
jeagle replied on at Permalink Reply
Thank you both. It turns out that I was editing the wrong style sheet. goldhat, thanks for the detailed explanation. Excellent.
Cahueya, thanks for the tip about Chrome's Dev Tools, makes life easier.
I now have my navbar on the right :)