WordPress.org

Support

Support » How-To and Troubleshooting » How can I Change the positioning of navigation bar?

How can I Change the positioning of navigation bar?

  • I’m clueless of how to make changes to my navigation bar.

    Eyesopenreport.com

    My navigation bar is a list of the categories where my blog posts go. It’s located above my posts. I would like to adjust the bar so it is the same on all browsers.

    How can I align the navigation bar?

    Is there a way to customize the length it runs across
    My website?

    Thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    If you want to center it, try adding this CSS:

    nav ul {
        display: table;
        float: none;
        margin: 0 auto;
    }

    You should add CSS via a custom CSS option if your theme has it – or add custom CSS via a plugin – that way your changes won’t be overwritten when the theme is updated.

    I don’t know if that will fix it on all browsers – you can test it and see. What browsers and versions are you having trouble with?

    }

    .nav ul {
    List-style: none;
    Margin: 0;
    Padding: 0;
    Float: right;
    text-align: center;
    }

    .nav ul li {
    Float: left;
    Margin: 0.25em;
    Padding: 0.25em;
    }

    .nav ul li.current_page_item { Border-bottom: 2px solid black; }

    .nav ul li a {
    Text-decoration: none;
    Color: #0000ff;
    Display: block;
    }

    there is my nav is CSS. When I did what you suggested it only changed the on mobile devices. How can I spread out the categories in the nav bar so they run the length of my header evenly?

    WPyogi

    @wpyogi

    Forum Moderator

    Where did you add the CSS I posted? I don’t see it on your site. Worked okay for me in Firebug on a laptop. Did you clear your browser cache?

    I don’t think there is a way to automatically space those out, though you can do it by adding a width to this CSS – you’d have to adjust that if you add more menu items:

    .nav ul li {
        width: 110px;
    }

    ugh..

    When I adjust the width of the nav bar it causes changes to the text. The words will stake on on top of eachother. ex:Police
    State

    My headers 956px

    Also would mind chnmging it to the length of the bar that separates the headline from the body of the article.

    WPyogi

    @wpyogi

    Forum Moderator

    Ah, if you want it the same width as your header, see if this works:

    .nav ul {
       float: none;
       display: table;
       margin: 0 auto;
       width: 1000px;
    }
    .nav ul li {
       width: 95px;
    }

    When I plugged that in the nav bar started at the beginning of the header but ended up at the very end of the page. Before each category was a bullet circle as well.

    is there anyway to space it the same length as the bar underlining the Headlines above the body of the posts?

    WPyogi

    @wpyogi

    Forum Moderator

    Where are you adding this code?

    I am adding it into style.css

    WPyogi

    @wpyogi

    Forum Moderator

    Are you aware that any changes you make to that file will be lost when the theme is updated? That’s why I suggested you use a custom CSS plugin.

    That said, it looks like you can move the menu over by adding a right margin here:

    .nav ul {
    	List-style: none;
    	Margin: 0;
    	Padding: 0;
    	Float: right;
    	text-align: center;
            margin-right: 150px;
    }

    I am aware.

    That actually centered the nav bar.

    All I want is the first category to line up with h2 evenly.

    The last category lines up with the end of the the second header bar perfectly.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How can I Change the positioning of navigation bar?’ is closed to new replies.
Skip to toolbar