How to split a top menu in two?

You probably will just have to add a margin right on PAGE 2 and margin left on PAGE 3.

Wow, that was faster than what I expected ??

Ok, but they are not separate. How do I do what you said?

– Remove the styles of the <ul> of the navigation and add them to each <li>.
Then try adding something like;

ul#mainmenu-menu li.menu-item:nth-child(2),
ul#mainmenu-menu li.menu-item:nth-child(3) {
 display: block;
}

ul#mainmenu-menu li.menu-item:nth-child(2) {
 margin-right: 50px;
}

ul#mainmenu-menu li.menu-item:nth-child(3) {
 margin-left: 50px;
}

I am waaaay out of my league here. This is what I have in the CSS for the Main Menu. Can you pinpoint, please, where and what exactly do I have to do? ??

/* =Main Menu
-------------------------------------------------------------- */

#mainmenu {
	margin: 35px 0;
	word-wrap: break-word;
	margin-left: 150px;
}

ul#mainmenu-menu {
	position: relative;

	background: rgb(247,247,247);
	background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
	background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
	border: 1px solid #E2E2E2;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
}

ul#mainmenu-menu li.menu-item {
	position: relative;

	border-right: 1px solid #E2E2E2;
	display: block;
	float: left;
	font-size: 11px;
	font-weight: bold;
}

ul#mainmenu-menu li.menu-item a {
	color: #5e5e5e;
	display: block;
	padding: 20px 40px;
	text-decoration: none;
}

ul#mainmenu-menu li.menu-item a:hover {
	background: #F9F9F9;
}

/* =Main Menu  : Scaled Menu
-------------------------------------------------------------- */

#mainmenu.scaled .container > div {
	width: 100%;
	height: 52px;

	display: table;
}

#mainmenu.scaled ul#mainmenu-menu {
	height: 52px;

	display: table-row;
}

#mainmenu.scaled li.menu-item {
	width: auto;
	height: 52px;

	border: none;
	display: table-cell;
	float: none;
}

#mainmenu.scaled li.menu-item a {
	border: 1px solid #E2E2E2;
	border-width: 1px 1px 1px 0;
	text-align: center;
}

#mainmenu.scaled li.menu-item:first-child a {
	border-left-width: 1px;
}

#mainmenu.scaled ul#mainmenu-menu ul.sub-menu li {
	border-width: 0;
	display: block;
}

#mainmenu.scaled ul#mainmenu-menu ul.sub-menu a {
	border: none;
}

/* =Main Menu  : Main Dropdown
-------------------------------------------------------------- */

ul#mainmenu-menu li.menu-item a {
	height: 52px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #5e5e5e;
	display: block;
	padding: 20px 40px;
	text-decoration: none;
}

ul#mainmenu-menu ul.sub-menu {
	position: absolute;
	top: 52px;
	left: 0px;
	width: 100%;

	background: white;
	border: none;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	display: none;
	z-index: 99;
}

ul#mainmenu-menu li:hover ul.sub-menu {
	display: block;
}

ul#mainmenu-menu ul.sub-menu li {
	border: none;
	display: block;
	float: none;
	font-weight: normal;
}

ul#mainmenu-menu ul.sub-menu li a {
	height: auto;

	line-height: 15px;
	padding: 15px 15px 15px 15px;
}

/* =Slider
-------------------------------------------------------------- */

#slider {
	margin: 35px 0;
}

/* =Slider  : Slides
-------------------------------------------------------------- */

#slider .slides {
	line-height: 0;
}

#slider .slides img {
	width: 100%;

}

Looking at your CSS, you’ll have to reformat a lot of your navigation to accomplish my recommendation;

/* Include here the styles I recommended above */

#mainmenu {
 margin: 0;
}

#mainmenu.scaled ul#mainmenu-menu {
 display: table;
}

#mainmenu.scaled li.menu-item {
 display: inherit;
 float: left;

 background: rgb(247,247,247);
 background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
 background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
}

Does that theme allow you to enter CSS in a section of the dashboard named, “Custom CSS”, “Jetpack” or “Custom Styles”?

Hello and thank you for your help so far!

Does that theme allow you to enter CSS in a section of the dashboard named, “Custom CSS”, “Jetpack” or “Custom Styles”?

I have nothing like that.

Download (and install) this Custom CSS Manager plugin and use its allocated section of the dashboard to hold your CSS modifications.

I’ve installed it. What do you mean by “use its allocated section of the dashboard to hold your CSS modifications”?

Should I enter what you posted above?

I think it’s under Settings in the dashboard, with the title as ‘Custom CSS Manager’.

I found that, I was asking if I should add to this new section the code that you posted above. Should I add both?

Yes, both like this;

ul#mainmenu-menu li.menu-item:nth-child(2),
ul#mainmenu-menu li.menu-item:nth-child(3) {
 display: block;
}

ul#mainmenu-menu li.menu-item:nth-child(2) {
 margin-right: 50px;
}

ul#mainmenu-menu li.menu-item:nth-child(3) {
 margin-left: 50px;
}

#mainmenu {
 margin: 0;
}

#mainmenu.scaled ul#mainmenu-menu {
 display: table;
 background: none;
}

#mainmenu.scaled li.menu-item {
 display: inherit;
 float: left;

 background: rgb(247,247,247);
 background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(244,244,244,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(247,247,247,1)), color-stop(100%,rgba(244,244,244,1)));
 background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 background: -o-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 background: linear-gradient(top, rgba(247,247,247,1) 0%,rgba(244,244,244,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f4f4f4',GradientType=0 );
}

Edit: Just edited the code in this post.

It’s progress, but in order to insert the logo inside the space between PAGE 2 and PAGE 3 Im going to need to eliminate the white background from the menu (just between PAGE 2 and PAGE 3). Isn’t there a way by which I can manage this menu or create a custom one that works easier that changing CSS?

Add this;

#mainmenu.scaled ul#mainmenu-menu {
 margin: 0 auto;
 border: 0;
 background: none;
}

Isn’t there a way by which I can manage this menu or create a custom one that works easier that changing CSS?

You can create a custom menu, but my code recommendations are based on the HTML from your current menu. The HTML from a custom menu will hold different classes. Adding/removing different amounts of menu items will also break the code.

WOW!!!

Thank you very, very much!!!

Now all I have to do is enlarge the gap and lower the logo into position.

You were very helpful!

Thanks a lot!