WordPress.org

Ready to get started?Download WordPress

Forums

How can I Change the positioning of navigation bar? (11 posts)

  1. jankowitts
    Member
    Posted 10 months ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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?

  3. jankowitts
    Member
    Posted 10 months ago #

    }

    .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?

  4. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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;
    }
  5. jankowitts
    Member
    Posted 10 months ago #

    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.

  6. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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;
    }
  7. jankowitts
    Member
    Posted 10 months ago #

    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?

  8. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    Where are you adding this code?

  9. jankowitts
    Member
    Posted 10 months ago #

    I am adding it into style.css

  10. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    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;
    }
  11. jankowitts
    Member
    Posted 10 months ago #

    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.

Reply

You must log in to post.

About this Topic

Tags

No tags yet.