- This topic has 5 replies, 3 voices, and was last updated 2 years ago by Ying.
-
AuthorPosts
-
April 12, 2022 at 5:47 pm #2186926Peter
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.
April 12, 2022 at 6:21 pm #2186942Fernando Customer SupportHi 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. 🙂
April 12, 2022 at 6:44 pm #2186953PeterHello 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
April 12, 2022 at 7:13 pm #2186964Fernando Customer SupportThank 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 ruleorder
allows you to set its order. The default order of all flex items is0
.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! 🙂
April 22, 2022 at 11:23 am #2197327PeterFernando,
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
April 22, 2022 at 2:02 pm #2197421YingStaffCustomer SupportHi Peter,
Here’s a good guide about
flexbox
CSS:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/Hope it’s helpful 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.