WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Delicate theme how to center navigation bar (7 posts)

  1. jsevo
    Member
    Posted 1 year ago #

    Please can someone help i dont now how to center navigation bar

    /* =Navigation
    -------------------------------------------------------------- */
    #menu {
    padding-top: 5px;
    }
    .topnav {
    z-index: 99;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
    }
    .topnav li {
    padding-right: 90px;
    }
    .topnav a {
    position: relative;
    text-transform: uppercase;
    font-size: 17px;
    display: block;
    z-index: 100;
    padding: 5px 0px;
    line-height: 18px;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

    }
    .topnav a:hover {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }
    .topnav li {
    float: left;
    width: auto;

    }
    .topnav li a.sf-with-ul {
    padding-right: 0px;
    }

  2. blogjunkie
    Member
    Posted 1 year ago #

    See this link. I refer to it every time I want to center a horizontal menu :)

    http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

  3. martcol
    Member
    Posted 1 year ago #

    A CSS rule already exists for the

      element that contains the menu.

      .topnav {
      z-index: 99;
      margin: 0;
      padding: 0;
      list-style: none;
      line-height: 1;
      }

      Just change the line margin: 0; to margin: 0 auto;

      I haven't been able to test this but I think it will work

  4. jsevo
    Member
    Posted 1 year ago #

    not work

  5. jsevo
    Member
    Posted 1 year ago #

    I want to simply center my site's navigation bar, not have it aligned left or right. I need it center aligned and horizontal. Any tips?

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Apply to the <ul> of the navigation;

    display: table;
    margin: 0 auto;

    Then apply to the <li> of the navigation;

    float: left;
  7. jsevo
    Member
    Posted 1 year ago #

    tnx

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.