How to evenly arrange menu items in nav bar

It’s the closing brackets on the media queries again: https://pics.competethemes.com/image/1V3z0240461n

Here’s what you want to do:

Take this CSS:

.menu-primary-items {
  padding: 12px;
  font-size: 130%;
}

And remove the font size property. Then, add this within the brackets of the 50em media query below:

.menu-primary-items {
  font-size: 130%;
}

Then the increase in the menu item size won’t affect the menu items on mobile devices.

Next, add the closing bracket for the 50em media query after the above CSS and before the CSS for the widget border. Currently, the widget border CSS is included in the media query which is why it is not affecting the site at mobile widths.

Lastly, I missed the text alignment you mentioned last time, so add this block of CSS to center the widget contents at mobile widths only:

@media all and (max-width: 800px) {

  .widget {
    text-align: center;
  }
}

That will center the widget contents up until the screen is 800px or wider.

I’m sorry to bother you again, but it’s not working properly.

I managed to get rid of the menu-border on mobile view, but when I opened the menu, all of the items were moved to the left.

Also, the logo is still huge on mobile view. Is there any way to make it smaller?

Oh and sorry for confusing you: All I wanted was to add a border to the bottom of the instagram-widget and not around all widget.
In addition to that, the slider on the sidebar looks a bit off center on mobile view. Can I add padding-left, so it is moved ‘more’ to the center?

Here is my CSS:

@media all and (min-width: 50em) {

.menu-primary a,
 .menu-primary a:link,
 .menu-primary a:visited {
   color: #333;
 }

 .menu-primary {
   border: none !important;
 }
 #menu-primary-container {
   border: 3px solid #000 !important;
 }

.menu-primary-items {
font-size: 130%;
}

}

.menu-primary-items {
padding: 12px;
}

@media all and (max-width: 800px) {

 .metaslider {
   left: -7.25%;
   width: 114.5%;
 }

.widget {
   text-align: center;
 }
}

.title-container {
 margin-bottom: 3em !important;
}

.menu-primary {
   width: 100%;
 }

 .menu-primary-items li {
   margin-right: 0;
   width: 16%
 }

#menu-primary-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#max-width {
 max-width: 960px;
}

.menu-primary-items {
   padding-top: 12px;
   width: 100%;
   text-align: center;
 }

.sidebar-primary {
padding-top: 100px;
}

.search-form {
padding-bottom: 40px;
}

.widget input[type="search"] {
 max-width: 150px !important;
}

.favorites-title {
    border-top: 1px solid #eee;
    position: relative;

    font-family: "Open Sans",sans-serif;
    font-size: 17px;
    padding-bottom: 20px;
    padding-top: 15px;
    text-align: center;
    text-transform: uppercase;
}

.snapwidget-title {
    border-top: 1px solid #eee;
    position: relative;

    font-family: "Open Sans",sans-serif;
    font-size: 17px;
    padding-bottom: 20px;
    padding-top: 15px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: solid 1px #e5e5e5;
}

.post-container {
padding-top:20px;
}

Here check this out:

.logo {
  max-width: 100px;
}
.menu-primary-items {
  padding: 12px;
}

.title-container {
  margin-bottom: 3em !important;
}

.menu-primary {
  width: 100%;
}

#menu-primary-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

#max-width {
  max-width: 960px;
}

.menu-primary-items {
  padding-top: 12px;
  width: 100%;
  text-align: center;
}

.sidebar-primary {
  padding-top: 100px;
}

.search-form {
  padding-bottom: 40px;
}

.widget input[type=search] {
  max-width: 150px !important;
}

.favorites-title {
  border-top: 1px solid #eee;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  padding-bottom: 20px;
  padding-top: 15px;
  text-align: center;
  text-transform: uppercase;
}

.snapwidget-widget {
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 24px;
  height: 279px;
}
.snapwidget-title {
  border-top: 1px solid #eee;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 17px;
  padding-bottom: 20px;
  padding-top: 15px;
  text-align: center;
  text-transform: uppercase;
  border-bottom: solid 1px #e5e5e5;
}

.post-container {
  padding-top: 20px;
}

/* Up to 800px */
@media all and (max-width: 800px) {

  .metaslider {
    left: -7.25%;
    width: 114.5%;
  }

  .widget {
    text-align: center;
  }
}

/* 800px and wider */
@media all and (min-width: 800px) {

  .logo {
    max-width: 999px;
  }
  .menu-primary a,
  .menu-primary a:link,
  .menu-primary a:visited {
    color: #333;
  }

  .menu-primary {
    border: none !important;
  }

  #menu-primary-container {
    border: 3px solid #000 !important;
  }

  .menu-primary-items {
    font-size: 130%;
  }
  .menu-primary-items li {
    margin-right: 0;
    width: 16%
  }
}

It’s reorganized to scale with the screen, and should address each of the customizations. The logo is given a max-width of 100px on mobile, but you can change that value to whatever you’d like to make is smaller/larger.

Hi Ben,
I am really sorry for not getting back to you sooner. Truth is, I have a lot going on, right now. Nevertheless I just want to say thank you – it worked nearly perfectly! All I had to do was inserting

.menu-primary {
 border: 3px solid #000000;
  }

into my style sheet, since the black border around the menu-items was missing when on mobile view.
There are only two tiny things, before I’ll stop annoying you (for quite some time, I hope ?? ):
When on mobile, the FAVORITES slider seems to be a bit off center (in comparsion to the instagram widget). I already tried setting “center align” in the meta-slider plug-in, but that obviously didn’t work out. What’s your guess?
Also, when opening the menu on mobile view, the first and last item seem don’t have the same distance to the menu border. Above that, is it possible to reduce the box-width, so the menu appears less stretched?

I’m really thankful for all the effort and time you’ve put into trying to help me so far. Thank you so much.

Okay cool, here’s what I found looking at the site.

The slider widget is being affected by the code added for the slider in the header. To fix it, we just need to make the selector for the header slider more specific like this:

/* Up to 800px */
@media all and (max-width: 800px) {

  .site-header .metaslider {
    left: -7.25%;
    width: 114.5%;
  }

  .widget {
    text-align: center;
  }
}

If you add a “.site-header” selector like in the code above, the widget will then be centered on mobile and the header slider won’t be affected.

Next, to fix the spacing around the menu items, find this code:

.menu-primary-items {
  padding-top: 12px;
  width: 100%;
  text-align: center;
}

Update the padding value like this:

.menu-primary-items {
  padding-top: 24px 24px 0 24px;
  width: 100%;
  text-align: center;
}

And then add this code:

@media all and (min-width: 800px) {

  .menu-primary-items {
    padding: 12px;
  }
}

Lastly, if you want to reduce the width of the box on mobile, you could use the following:

@media all and (max-width: 800px) {

  .menu-primary {
    margin: 2.25em auto;
    width: 80%;
  }
}

The 80% value can be changed to make the menu narrower/wider.

That should do it!

Thank you so much! It’s working perfectly ??

You’re welcome, glad I could help ??