[mbsavill]

Hello,

How do I reduce the space in between the main menu items?

Thank you

[Theme Horse Support Team]

Hi,

Can you please clarify which space you are trying to reduce? Are you talking about the each menu item space?

Thank you!

[mbsavill]

Yes that’s correct

[Theme Horse Support Team]

To reduce spacing between the menu item just go to Appearance > Customize > Additional CSS and paste the below custom CSS code to

@media (min-width: 992px) {
	.main-navigation a {
		padding-left: 10px;
		padding-right: 10px;
	}
	.main-navigation > ul > li.menu-item-has-children > a,
	.main-navigation > ul > li.page_item_has_children > a {
		padding-right: 25px;
	}
	.main-navigation > ul > li.menu-item-has-children > a:after,
	.main-navigation > ul > li.page_item_has_children > a:after {
		right: 10px;
	}
	.search-toggle {
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media (min-width: 1600px) {
	.main-navigation a {
		padding-left: 15px;
		padding-right: 15px;
	}
	.main-navigation > ul > li.menu-item-has-children > a,
	.main-navigation > ul > li.page_item_has_children > a {
		padding-right: 32px;
	}
	.main-navigation > ul > li.menu-item-has-children > a:after,
	.main-navigation > ul > li.page_item_has_children > a:after {
		right: 15px;
	}
	.search-toggle {
		padding-left: 15px;
		padding-right: 15px;
	}
}

[Mravi]

Hello
I want to decrease the height of the menu bar. Where can I?

[Theme Horse Support Team]

Hi Mravi,

Please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS code.

@media (min-width: 992px) {
	.main-navigation a,
	.search-toggle {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.main-navigation .dropdown-menu a,
	.main-navigation li ul a {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

Thanks

[Mravi]

Thank you for your this, now it works perferctly.

[Theme Horse Support Team]

Welcome anytime @barna-mravinac

[Mravi]

In mobile view, how do I change the menu like this?

menu from the left

[Theme Horse Support Team]

Hi,

Please go to ‘Appearance > Customize > Additional CSS’ and paste the below Custom CSS code.

@media (max-width: 767px) {
	.navbar-collapse,
	.navbar-collapse.show {
		display: block;
	}
	.navbar-collapse {
		position: fixed;
		top: 0;
		left: -100%;
		bottom: 0;
		z-index: 10001;
		padding: 50px 15px 15px;
		margin: 0;
		background-color: #ffffff;
		transition: all ease-in-out 0.2s;
		-webkit-transition: all ease-in-out 0.2s;
		-moz-transition: all ease-in-out 0.2s;
	}
	.navbar-collapse.show {
		left: 0;
		width: 90%;
		box-shadow: 50px 0 100px  rgba(0, 0, 0, 0.7);
		-webkit-box-shadow: 50px 0 100px  rgba(0, 0, 0, 0.7);
		-moz-box-shadow: 50px 0 100px  rgba(0, 0, 0, 0.7);
	}
	.navbar-toggler {
		position: absolute;
		top: 0;
		left: 15px;
		transition: all ease-in-out 0.4s;
		-webkit-transition: all ease-in-out 0.4s;
		-moz-transition: all ease-in-out 0.4s;
		animation-name: navbutton;
	}
	@keyframes navbutton {
	0%   {opacity: 1;}
	50%   {opacity: 1;}
	100%  {opacity: 0;}
}
	[aria-expanded="true"].navbar-toggler {
		position: fixed;
		top: 0;
		left: 15px;
		z-index: 10002;
		color: #000000;
	}
	[aria-expanded="true"].navbar-toggler:before {
		content: "\f00d";
		font-size: 20px;
	}
	.navigation-bar-top {
		min-height: 46px;
	}
	.navigation-bar-top .search-toggle {
		height: 46px;
	}
	.search-block {
		margin-top: 46px;
	}
}

Thanks

[Mravi]

Very good. Thank you very much!

[Theme Horse Support Team]

Welcome anytime @barna-mravinac

[Author]

Posts