Archived topic
Split Template and nth child navigation
5 replies · Started by Peter on April 12, 2022
This is the current CSS in the Additional CSS section my customizer.
/*.main-navigation:not(.toggled) ul li.glow-button a {
border-width: 1px;
font-family: open sans condensed;
background-color: #E007f8;
border:2px solid #E007f8;
color: #ffffff;
border-radius: 12px;
line-height: 30px;
} */
/*.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
} */
/*.glow-button a {
transition: all 0.2s ease-in;
} */
.glow-button:hover a {
box-shadow: 0 0 20px rgb(224, 7, 248,0.8);
transform: translateY(3px);
}
.wp-block-button__link,glow-button:hover,
.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}
/*.main-navigation .main-nav ul li a:hover {
text-shadow: 0 0 10px #fff !important;
}*/
@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
#site-navigation {
margin-left: unset !important;
display: flex;
}
.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}
#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(2) {
margin-left: auto;
}
}
/* GeneratePress Site CSS */ .nav-float-right .header-widget .widget {
padding-bottom: 0;
}
.site-branding,
.site-logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 200;
}
button,
html input[type="button"], input[type="reset"], input[type="submit"], a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
border: 1px solid transparent;
}
.widget-area .widget_search {
padding: 0;
}
.no-sidebar .inside-article > *,
.no-sidebar #comments,
.no-sidebar .nav-links {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.no-sidebar .generate-columns-container .inside-article > * {
max-width: none;
}
.nav-links > * {
padding: 5px 15px;
border-width: 1px;
border-style: solid;
border-color: inherit;
}
.entry-content .happyforms-flex {
padding: 0;
}
#site-navigation {
float: none;
width: 100%;
}
.main-navigation .main-nav,
.main-navigation .menu-item-separator{
flex-grow: 1;
}
.main-navigation .menu-item-separator a {
font-size: 0;
background: transparent !important;
}
.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
display: none !important;
}
@media (max-width: 768px) {
.inside-header>:not(:last-child):not(.main-navigation) {
margin-bottom: 0;
}
} /* End GeneratePress Site CSS */
I am trying to move items from one side of the logo (I using the Split template) and regardless of what number I put in the parenthesis:
/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(2) {
margin-left: auto;
}
}
These are the current menu settings.
Also, is their documentation for the Split template?
Thanks in advance.
Hi Peter,
The documentation for Split’s header is here: https://docs.generatepress.com/article/centering-logo-navigation/
To have an idea on how we may best assist you, may you provide the link to the site in question, and how specifically you would like to menu items to be ordered?
You may use the private information field if you prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hope to hear from you soon. :)
Hello Fernando,
I read that article a few times. What I was referring to is that I noticed that some templates have dedicated documentation (i.e. Charge has a documentation button with actual documentation) and others don't.
I can't believe I didn't include my URL.
I haven't decided on the final arrangement, but what I am leaning toward is home, about and posts on the left side (I am getting rid of Service) and shop and the search on the right. The reach will actually be eliminated and I want to replace it with an magnifying glass icon that will go to a custom post page with a search bar in the middle of the page.
Lofty goals for a rookie web designer.
Thanks a million and have a great evening.
Peter
Thank you for adding the link to your site. I’ll try to explain this the best I could.
Basically, your parent menu-items are under a ul (unordered list element) which has a display of flex.
Any elements inside an element that has a display of flex can be ordered specific to your preference.
For instance, try adding this code in Appearance > Customize > Additional CSS:
div#primary-menu > ul > li.menu-item:nth-child(1) {
order:-3;
}
div#primary-menu > ul > li.menu-item:nth-child(2) {
order:-2;
}
div#primary-menu > ul > li.menu-item:nth-child(5) {
order:-1;
}
div#primary-menu > ul > li.menu-item:nth-child(3) {
order:1;
}
div#primary-menu > ul > li.menu-item:nth-child(6) {
order:2;
}As can be seen, the nth-child(x) determines which menu item you want to re-order, and the CSS rule order allows you to set its order. The default order of all flex items is 0.
You’ll need to set a negative order to place flex items before default items, and a positive value to place them after.
In that case, if and when you add a new menu-item, you would need to have this code to place it at the very start for instance:
div#primary-menu > ul > li.menu-item:nth-child(7) {
order:-4;
}Hope this clarifies. Feel free to reach out if you’ll need further assistance! :)
Fernando,
After about 3 hours I got lucky and got the format I wanted. Can you please suggest some reading material so that I can learn more about Flex and how it works in GeneratePress. Thank you in advance.
Best regards,
Peter
Hi Peter,
Here's a good guide about flexboxCSS:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope it's helpful :)
