Center the Nav menu

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.

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

Hello,

my website url: https://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

It is a CSS issue.

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.

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?

Add this to you child theme css:

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

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

https://www.breisacher.ch

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?

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’

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

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.

https://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

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…

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

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

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