[Resolved] Reducing spaces in between menus

[Sars]

Dear Team,
how to reduce spaces in between menus so that they do not break even in smaller devices
Ex:
https://prnt.sc/10x82rz

Also, How to add a vertical line in beween menus.

Thank You

[Leo]

Hi there,

I see a couple of options here:

– Reducing the menu item width:
https://docs.generatepress.com/article/menu-item-height-width/

– Increase the mobile menu breakpoint so the toggle kicks in when the menu breaks:
https://docs.generatepress.com/article/mobile-navigation/#using-gp-premium

[Sars]

Thanks Leo, I tried adjusting the menu weidth, But they are not adjusting evenly, The last two menu items gets very close than the remaining ones.

https://paste.pics/C11KU

[Leo]

Looks like you’ve added some CSS to remove the dropdown arrow?

Can you disable your caching plugin so I can take a look?

Please always do so when we are trying to help:
https://www.screencast.com/t/QYxd3aP81ha7

Thanks!

[Sars]

Hi Leo,
i have disabled WProcket and this is the custom code

/* Remove header title on single page */
.page .entry-header,
.single .entry-header {
      display:none;
}
/* Remove header title on single page */

/* Add Padding to submenu */

.secondary-navigation .main-nav ul ul li a {
    padding-left: 40px;
    padding-right: 40px;
}
/* End */

/* Remove Arrow dropdown icon on menu, Add dropdown arrow icon on submenu */
@media (min-width: 769px) {
    .secondary-navigation .main-nav > ul >li.menu-item-has-children > a > .dropdown-menu-toggle {
        display: none;
    }
    .secondary-navigation .main-nav > ul >li.menu-item-has-children > a {
        padding-right: 68px;
    }
}

/* Stop overflow */
html {
  overflow-x: hidden;
}
/* End */

/* Set Fixed width to slideout menu */
.slideout-navigation.main-navigation .main-nav ul li a,
.slideout-navigation.main-navigation .menu-item-has-children .dropdown-menu-toggle{
  padding-left: 20px;
  padding-right: 20px;
}
/* End */

/* Allign menus to right. Move primeru icons to next line from logo! */
@media (max-width: 600px) {
  .has-inline-mobile-toggle .mobile-menu-control-wrapper {
    flex-wrap: nowrap;
    margin-left: unset;
    margin-top: 10px;
    flex: 1;
  }

  .main-navigation .menu-bar-items {
    flex: 1 0 calc(100% - 70px);
    justify-content: space-evenly;
  }

  .menu-toggle.secondary-menu-toggle {
    text-align: right;
  }

}
/* End! */

/* Cart Items Breaking https://generatepress.com/forums/topic/menu-breaks-on-mobile/#post-1697647 ! */
.cart-contents.shopping-cart.has-svg-icon {
  display: flex;
  align-items: center;
}

/* Remove menu cart items on cart*/
.menu-bar-item .shopping-cart .number-of-items {
    display: none;
}

Thanks for your time

[David]

Hi there,

1. The main spacing is set in Customizer > Layout > Secondary Navigation > Menu Item Width:

2. Then in your CSS you have this which is overwriting the right padding:

.secondary-navigation .main-nav > ul >li.menu-item-has-children > a {
  padding-right: 68px;
}

[Sars]

Thanks David,
That solves the menu break. But still I am seeing uneven space on the right side than the left.
https://paste.pics/C17FW

Another Issue is, The phone and email Icons on primary menu became very small (Almost invisible) on different devices.

Kindly help

Thank you

[Elvin]

Hi there,

I’ve tried inspecting your site to check for any possible cause of this and there seems to be an issue with your site that prevents us from checking things properly.

The stylesheets on your site don’t seem to be loading properly. This is how it looks on our end.
https://share.getcloudapp.com/eDujAvvv

Can you try addressing this first so we could check for the uneven spacing and the icon sizing? Let us know.

[Sars]

Hi Elvin,
Thanks for your reply. Can you let me know of your country please so that I can whitelist it. As the client gets orders only from US, i have blocked all other countries.

[Elvin]

Hi Elvin,
Thanks for your reply. Can you let me know of your country please so that I can whitelist it. As the client gets orders only from US, i have blocked all other countries.

Manila, Philippines. Thank you.

Let us know if it’s whitelisted so we may check. Thank you.

[Sars]

Thanks a lot Elvin. I have whitelisted Philippines now.

Thanks for your time.

[Elvin]

Thanks.

I’ve inspected your site and the spacing, while uneven, doesn’t look as bad as what you’ve shown in the image. Here’s what it looks like on my end: https://share.getcloudapp.com/YEuRl1NR

It’s still fairly uneven to but that’s because you have this custom CSS:

 .secondary-navigation .main-nav > ul >li.menu-item-has-children > a {
 padding-right: 24px;
 padding-left: 24px;
 } 

This applies on some menu items but some menu items have padding right and left of 19px.

there’s a 5px different on left and right so the spacing on some menu items are narrower than the ones w/o this CSS.

What I’d recommend is to edit the selector a bit so it applies to all menu items.

 .secondary-navigation .main-nav > ul >li > a {
 padding-right: 24px;
 padding-left: 24px;
 } 

Ignore this if the 24px padding is intended.

[Sars]

Hi Elvin,
Thanks for your time .
I have removed this code

  .secondary-navigation .main-nav > ul >li.menu-item-has-children > a {
        padding-right: 24px;
			 padding-left: 24px;
    } 

And tried the selector, But as you can see, The right side is very wide and not even

[Sars]

Thanks Elvin, It is solved i think now. I have that same padding in many places. Removed them all and it works well.

Thanks for your time and advice.

[Elvin]

Nice one! glad you got it sorted. No problem. 🙂

[Author]

Posts