WordPress.org

Ready to get started?Download WordPress

Forums

Center the Nav menu (17 posts)

  1. samwordpress91
    Member
    Posted 5 months ago #

    Hello guys I need seriously your help. I do ve a problem to center the Nav-menu bar.
    Its my first wordpress website which Im doing. I googled for a solution but I dint had luck :/

    Thanks in advance for your help

    Thats my code:

    [CSS moderated. Please just post a link to your site.]

  2. esmi
    Forum Moderator
    Posted 5 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. Maria Antonietta Perna
    Member
    Posted 5 months ago #

    Please, post a link to your site so that I might be able to help you. Thanks.

  4. samwordpress91
    Member
    Posted 5 months ago #

    Hello,

    my website url: http://www.breisacher.ch

    @esmi I dont think its a css problem.

    maybe u didnt understand me. I want to center the nav menu. at the moment the nav is left blocked.

    does somebody know how i can center the content?

    everything is left blocked as a default setting...

    thanks in advance for your help.

    cheers

  5. esmi
    Forum Moderator
    Posted 5 months ago #

    It is a CSS issue.

  6. DMBarber
    Member
    Posted 5 months ago #

    As @esmi said, this is a CSS issue. Before adding/changing any code or css in your theme, it is highly advisable that you create and activate a child theme.

    Then in your child theme stylesheet add this to the bottom:

    #navigation .sf-menu {
    float: none;
    max-width: 550px;
    margin: 0 auto;
    }

    The max-width: 550px; can/may need to be changed to a value more fitting to your needs.

  7. samwordpress91
    Member
    Posted 5 months ago #

    Okay I created a child theme and its working.
    The Nav bar is in the middle but now how can I spread the menu bar over the length?

  8. DMBarber
    Member
    Posted 5 months ago #

    Add this to you child theme css:

    #navigation {
    margin-right: -175px;
    margin-left: -175px;
    }

  9. samwordpress91
    Member
    Posted 5 months ago #

    Okay I made the change but it goes out left and right.

    http://www.breisacher.ch

  10. samwordpress91
    Member
    Posted 5 months ago #

    I added as well this child to the theme

    #main-content {
    padding: 175px;
    }

    The content is in the middle but when I added the child, the website is now taller there where the logo will come in. How can i make this part smaller? If I would know where I can find the size of the website Height and weith I think then I can work it out maybe. I think thats the body right which must get changed?

  11. DMBarber
    Member
    Posted 5 months ago #

    Okay I made the change but it goes out left and right.

    Is this not what you wanted when you asked:

    The Nav bar is in the middle but now how can I spread the menu bar over the length?

    I apologize if I misunderstood. If you want your nav menu to be across the entire page, there is no need to center it. It will take more complicated CSS.

    Also,

    #main-content {
    padding: 175px;
    }

    adds padding to each side of the content area: top, right, bottom, and left. To add it only to the sides you may write it in either of two ways.

    Full method:

    #main-content {
    padding-top: 0;
    padding-right: 175px;
    padding-bottom: 0;
    padding-left: 175px;
    }

    or in 'shortcut' mode (2 methods do the same thing, second is just shorter to write):

    First:
    #main-content {
    padding: 0 175px 0 175px;
    }

    Second:
    #main-content {
    padding: 0 175px;
    }

    Removing the padding from the top will remove the 'now taller there where the logo will come in'

  12. samwordpress91
    Member
    Posted 5 months ago #

    Okay now I understand this with the body. Now it makes sense for me lol :D

    Im sorry that I was not 100% precise.

    What I mean is:

    The above navigation menu spreadet pixel accuracy across the entire width of the content area. The first menu-item starts at the left edge and the last menu-item ends with the last character on the right. The spacings between the menu-items remain the same. Even if you change the window size.

    http://heikomamerow.de/demos/the-well-spreadet-menu/the-well-spreadet-menu_v2.html

    I cant follow his description of it. I dont know what i ve to add by the child style.css

  13. DMBarber
    Member
    Posted 5 months ago #

    This is rather complicated. First make a copy of your child theme stylesheet and store it elsewhere on your computer as a backup. Then replace the main section of your child theme stylesheet with this (just copy and paste - top line added for reference):

    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    #navigation {
       margin-right: -175px;
       margin-left: -175px;
    }
    
    #navigation .sf-menu {
      display: block;
      float: none;
      margin: 0;
      text-align: justify;
    }
    #navigation .sf-menu li {
      display: inline-block;
      float: none !important;
      border: none; /* removes line from right side of li element */
    }
    #navigation ul.sf-menu li:last-child {
      padding-left: 100%;
    }
    #navigation ul.sub-menu li:last-child {
      padding-left: 0;
    }
    #navigation ul.sf-menu ul.sub-menu {
      margin-left: -90px; /* This keeps the dropdown menu inside the page */
    }
    #main-content {
      padding: 20px 175px; /* The 20px adds some padding to the top AND bottom of the page and can be change to suit your needs */
    }

    Now for the complicated bit:

    In your child theme folder, create a file called functions.php and add this bit of code (this adds the 'empty' li element to the end of your nav menu):

    <?php
    add_filter('wp_nav_menu_items', 'add_empty_li_element', 10, 2);
    function add_empty_li_element($items, $args) {
      $items .= '<li> </li>';
      return $items;
    }
    ?>

    That should do it. If not, let me know...

  14. samwordpress91
    Member
    Posted 5 months ago #

    Okay we re almost there. One nav is outside of the website.
    It didnt created the function.php

  15. DMBarber
    Member
    Posted 5 months ago #

    Without the functions.php file, my solution will not work.

  16. samwordpress91
    Member
    Posted 5 months ago #

    Oke what I did now I created a functions.php and added the code.

    It is working now thank you very much you helped me now a lot.. a step further to understand wordpress ;D

    cheers bro

  17. DMBarber
    Member
    Posted 5 months ago #

    Glad to help. Cheers!

Reply

You must log in to post.

About this Topic