How to make menu items fit in certain width (News PRO theme)

[Norbert]

Hello, I have News Pro theme and wanted to ask how to customize it so that menu items would proportionally fit into the length shown in the picture ( either 1 or 2). There won't be more menu items.

menu

Thank you for replies.

[Victor Font]

Please post a link to the site. We can't help unless we can examine the CSS.

Also, you said you want to fit the menu to either 1 or 2 in the picture. What do you mean by that? Is it 1 OR 2 or both depending on screen size?

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Norbert]

Sorry. Here's the link: https://geeksadvice.com/
Sorry for being unclear, I meant OR, one or another option is okay 🙂
May I add another question about the menu - it used to collapse on smaller screens, and interestingly, in Customize page (while the screen size is smaller) it appears collapsed, but in live version the menu buttons just shrink, but do not collapse into one menu button. I didn't do any changes to menu as far as I can remember.

[Norbert]

https://imgur.com/a/YwbgGlq added an image to explain better (regarding the second question). On the left, it's how I see the menu when in Customize panel. Everything's ok, the menu collapses on smaller screen. On the right, it is the live version of website.

[Victor Font]

As I said in my earlier post, please post a link to the site. We cannot help you without being able to examine the CSS.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Norbert]

I already did, in my reply #489267 - it's https://geeksadvice.com/

[Victor Font]

Sorry, I missed the it the first time. I'll take a look.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Norbert]

Any news?

[andytc]

You can try this as custom CSS , make sure you test it all the way down through devices.

You might have to add !important in certain places depending on where you add this -

.genesis-nav-menu {
 display: flex;
 justify-content: space-between;
}

.genesis-nav-menu .menu-item {
 display: inline-block;
 text-align: center;
 margin-right: 0;
 width: 100%;
}

.genesis-nav-menu li:last-child a {
 border-right:none;
}

@media only screen and (max-width: 1023px) {

.genesis-nav-menu {
 display: block;
}

.genesis-nav-menu .menu-item {
  width: auto;
}

}

[Author]

Posts