How to evenly arrange menu items in nav bar

Thanks for choosing Apex!

This can be done, but only if the number of menu items is known. The menu won’t be able to update dynamically as menu items are added.

In practice, this just means you’ll have to change one of the values below when you add/remove menu items.

Here’s the CSS:

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

  #menu-primary {
    width: 100%;
  }
  #menu-primary-items {
    width: 100%;
    text-align: center;
  }
  #menu-primary-items li {
    margin-right: 0;
    width: 16.666%
  }
}

That will wait until the screen is 800px or wider, and then evenly distribute the menu items like this: https://pics.competethemes.com/image/1i1E2o3B1506

As you can see, the very last value (16.666%) is calculated so each list item has an equal part of the width (100/6). That’s the value that will need to be changed if you add/remove menu items in the future.

First of all: Thanks for helping me out!

Having done this my website looks like this.

Any idea what went wrong?

Here’s my stylesheet:

.logo {
position: relative;
top:-30px;
}

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

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

#menu-primary {
   width: 100%;
 }
 #menu-primary-items {
   width: 100%;
   text-align: center;
 }
 #menu-primary-items li {
   margin-right: 0;
   width: 16.666%
 }

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

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

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

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

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

.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;
}

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

Also, is there any way to change the font colour to solid black? Right now it’s kinda grey and when clicked it turns to black. Can you reverse it?

Plus, is it possible to make the gap between the logo and the menu bar smaller?

Best wishes!

That’s odd, you have it just as I tested, but for some reason the list items are adding up to more than 100% width. If you change the 16.666% to 16%, they should fit. Visually, it will look the same.

And this CSS will give the menu items the darker gray color they have when hovered over, and also reduce the space between the logo and menu:

@media (min-width: 50em) {

  .menu-primary a,
  .menu-primary a:link,
  .menu-primary a:visited {
    color: #333;
  }
}
.title-container {
  margin-bottom: 3em !important;
}

Dear Ben,
it worked like a charm! Thank you so much! You’re a star.

This ist just for looks, but can I make the stylesheet less ‘crowded’?

Best wishes

You’re welcome ??

Would you like to make the code in your child theme’s stylesheet less crowded, or the primary stylesheet in Apex?

Hi Ben,

sorry for not specifying my request any further.
I mean the stylesheet of my child theme.

also: is there an easy way to change the font to any font I want (like a custom one)?

No worries. You could remove everything at the very top of the stylesheet except for the “template” and “theme name” lines. For the rest of the code, you could use comments to organize it into sections like this:

/***** Header *****/

.fake-class {
  property: value;
}

/***** Post *****/

img {
  property: value;
}
a {
  property: value;
}

That will make it a bit easier to navigate and use.

For changing the font, Apex Pro has a fonts feature that lets you pick from 728 fonts for the site title, headings, and the rest of the site.

An alternative option would be the Easy Google Fonts plugin.

Hi Ben,

first of all: sorry for the late reply and thank you so much for helping me out this far.

However, I still have some questions. When on mobile view the first item in the menu bar is too close to the border (compared to the “about”). Any ideas on how to solve that?

Also, is there a way to display the first picture in the preview of a post? And is it possible to use different fonts in one post?

Apart from that, I’d love to arrange my social icons like this (it’s my tumblr), so that they’re right below the “L”.

Furthermore, do you know how to insert an instagram widget like this one (see sidbar)and these social icons on top?

Sorry for all these questions. I’m still figuring out how coding works.

Best wishes!

Try this code for the spacing between the border and the ‘About’ menu item:

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

For showing the first image in the post, check out the “Include links & images in an excerpt” section in this tutorial: https://www.competethemes.com/help/change-excerpt-length-apex/

Changing the font on a per-post basis will be a bit complicated, but you could probably do it with the Easy Google Fonts plugin.

Try this CSS for the social icons showing below the logo:

.social-media-icons {
  display: block;
  text-align: center;
}

Lastly, the social icons in the sidebar on that site are coming from a plain text widget with the code pasted in there. The widget being used on that site for Instagram is the Instagram for WordPress plugin: https://www.ads-software.com/plugins/instagram-for-wordpress/

Hey Ben,

thank you so much for your response! I know I’m asking a lot and I greatly appreciate your effort in trying to help me.

I did like you told me (padding-top: 12px), but couldn’t identify any change in the distance between border and first menu-item on mobile view.
Also, when inserting the code for rearranging the social media icons, it positioned the icons at the center of the menu bar and not below the logo.
Any ideas on how to approach this?

Oh and thanks for the tutorial! Now I know how to preview the images in a post ??

Sure thing!

I checked out your code, and I think there is a missing bracket on the media query: https://pics.competethemes.com/image/3a0M3f0E2Z2t

Did you want the code following it to be included? If so, that’s fine, but the menu padding isn’t applying because it is within the media query which tells it not to take effect until the screen is 50em/800px or wider.

The social icons is actually a bit trickier than I thought. As you saw, they end up below the menu instead of above. To change this, you’ll want to copy the header.php file from Apex into your Apex Child theme, and then move the social icon function above the menu, but still inside the “menu-primary-container” div.

The last step would be to remove the black border from menu-primary-container, and place it on menu-primary instead. Then the social icons will be above the menu, and outside the box containing the menu items.

Ben. You. are. amazing. IT WORKED!

One last thing (for now ?? ): The menu items and logo look huge on mobile view while the front slider is pretty small. Is there any way to make the slider bigger (so it spans across the screen like on the mobile view of isaaclikes.com) and to make the menu items and the logo comparatively small?
Also, when I scroll all the way down, the “sidebar” looks kinda squeezed together (no space and not centered; there’s no separation line for the favorites and the instagram widget like there is on desktop view) and the items are way too big as well (see mobile view of isaaclikes.com for how I’d like them to be).

Haha sure let’s break it down piece by piece.

Starting with the menu item size, they’re currently being enlarged by this CSS in your child theme:

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

If you move that within the 50em media query from before, then the size increase won’t affect the menu items on mobile devices.

For making the slider full-width, you can use this:

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

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

That’s going to stretch it outside the container it’s in up until the screen is 800px wide, at which point, it will return to its current width.

For the widgets, try the following:

.widget {
  border-bottom: solid 1px #e5e5e5;
  padding-bottom: 1.5em;
}

That will add some spacing and a border between each widget. Let me know what you think.

We’re nearly there.

I did like you told me and the code for the logo and slider worked like a charm. When implementing the code for the menu-items, however. it created a solid line near the menu-button and moved the menu-items to the left (they’re still pretty big).

Also, the sidebar widget-code created a border between every widget on desktop-view, while only the mobile version displayed what I wanted (a border between search-bar, favorites, Instagram and “recent rants”). The favorites-slider and Instagram-widget are still located on the left (and not centered) on mobile view.
Any thought on this?

Part of the problem is, that my css-stylesheet ist just way too cluttered, I guess…