Hello Petra, try to use the following CSS code.
You can add CSS code in Customize → Additional CSS section.
@media (min-width: 1200px) {
#masthead .site-branding {
flex-basis: 20%;
}
#masthead #site-navigation {
flex-basis: 80%;
}
ul.header-search-cart {
margin-left: 20px;
}
#masthead #site-navigation ul.menu > li:first-child {
padding-left: 0;
}
#masthead #site-navigation ul.menu > li:last-child {
padding-right: 0;
}
.main-navigation li {
padding: 0 10px;
}
}
Please feel free to ask any other questions that you might have.
Kind Regards, Roman.
Hey Roman,
thank you for the rush answer. I added the code in the additional css section, but the top navigation is still divided into 2 rows. Can you please check it?
Big thanks!
Petra
You don’t have a closing curly brace here on the fourth line:
/* Hover links */
a:hover {
color: #be6875;
@media (min-width: 1200px) {
#masthead .site-branding {
flex-basis: 20%;
}
#masthead #site-navigation {
flex-basis: 80%;
}
ul.header-search-cart {
margin-left: 20px;
}
#masthead #site-navigation ul.menu > li:first-child {
padding-left: 0;
}
#masthead #site-navigation ul.menu > li:last-child {
padding-right: 0;
}
.main-navigation li {
padding: 0 10px;
}
}
Try to add it like this:
/* Hover links */
a:hover {
color: #be6875;
}
@media (min-width: 1200px) {
#masthead .site-branding {
flex-basis: 20%;
}
#masthead #site-navigation {
flex-basis: 80%;
}
ul.header-search-cart {
margin-left: 20px;
}
#masthead #site-navigation ul.menu > li:first-child {
padding-left: 0;
}
#masthead #site-navigation ul.menu > li:last-child {
padding-right: 0;
}
.main-navigation li {
padding: 0 10px;
}
}
Kind Regards, Roman.
Oh, thank you very much for your support!! Have a nice day!
You are welcome!
And have a nice day as well 🙂
Kind Regards, Roman.
