Menu breakpoints on desktop

Hello
how can I reduce the space between the menu topics or prevent an early breakpoint ?

On desktop,in my example, the breakpoint force the language selector to move under the navigation, even when there is enough space…

Hi,

Here is the CSS code to reduce the space between menu items:

.main-navigation li {
    padding: 0 7px;
}

The 7px value is used to adjust the left and right (padding) space.

You can put the code into Customize > additional CSS

Regards,

1 Like

Great @awan, thank you very much, but how can i change the breakpoint till
the menu switch to the mobile (hamburger) menu, there is still so much space.

Thanks, great lightweight theme by the way, guess i will get the PRO version when my customer accept my demo.

Hi,

I don’t understand enough about this question, can you explain it more detail?

Hello,
I’m having the same problem. With smaller desktop screens, the menu items are displayed in two rows instead of one. This is before the switch to the hamburger menu. Is there a way to have the display switch to the hamburger menu sooner?
Thanks so much for your help! :slight_smile:

Hi,

Can you please to attach a screenshot that explain your issue?

Regards,

She asked the same question than me, “How to change the breakpoints for the main menu”

Ok, So, you want the toggle button menu on mobile displayed in desktop screen also, correct?

If yes, please try to add this CSS code below:

.header-mobile-menu{
	display: block;
	text-align: right;
}
.mobile-menu-toggle_lines:before, 
.mobile-menu-toggle_lines:after{
	background-color: white;
}
.menuStyle1.mobile-menu-active .site-header{
	background-color: black;
}
.main-navigation {
	display: none;
	background-color: black;
	opacity: 0;
	visibility: hidden;
	position: inherit;
	margin: auto;
}

.main-navigation ul ul{
	float: unset;
	position: initial;
}
.main-navigation ul ul li{
	background-color: rgba(255, 255, 255, .1) !important;
	border: none;
}
.main-navigation ul ul li a{
	text-align: center;	
	color: white !important;
	width: 100%;
}
.mobile-menu-active .main-navigation {
	display: block;
	opacity: 1;
	visibility: visible;
	top: 78px !important;
}
.main-navigation li{
	display: block;
}
.main-navigation li a{
	text-align: center;
	padding: 15px 30px;
	line-height: 2;
	font-size: 15px;
}

Regards,

hi @awan, no we just want to change the breakpoints, from tablet/mobile,
because the mobile menu appears to “early” on smaller desktop screens :slight_smile:

Oh okay, then try this code please:

@media (min-width: 1024px){
	#masthead.site-header{
		background-color: transparent;
	}
	.is-sticky #masthead.site-header{
		background-color: #13151d;
	}
	.header-mobile-menu{
		display: none;
	}
	.main-navigation{
		top: auto !important;
		display: flex;
		position: relative;
		visibility: visible;
		background-color: transparent !important;
		opacity: 1;
	}
	.main-navigation li:first-of-type{
		padding-left: 15px;
	}
	.main-navigation li{
		display: inline-block;
		border: none;
	}
	.main-navigation ul li.menu-item-has-children ul.sub-menu{
		display: none;
	}
	.main-navigation ul .subnav-toggle{
		display:none;
	}
	.main-navigation a{
		font-size: 16px;
		line-height: 24px;
		padding: 0;
	}
}
1 Like

Thanks @awan , it partly works, breakpoints are looking good now, just the dropdown for the WPML translation disappeared from the navigation bar, the widget at the bottom/left.works though.

Before, on hover, the other available languages appeared in the navbar. Check:

https://kim-wegener.com

Hmm… Can you please to remove this line from the code above?

.main-navigation ul li.menu-item-has-children ul.sub-menu{
    display: none;
}

Then add this code between @media (min-width: 1024px){ and last close bracket }:

@media (min-width: 1024px){
...
...
  .main-navigation {
    pointer-events: auto;
    overflow: unset;
  }
  .main-navigation ul li.menu-item-has-children:hover ul.sub-menu {
    display: block !important;
  }
  .main-navigation ul li.menu-item-has-children ul.sub-menu {
    position: absolute;
    left: auto;
  }
...
...
}