[Support request] Split Template and nth child navigation

Home Forums Support [Support request] Split Template and nth child navigation

Home Forums Support Split Template and nth child navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2186926
    Peter

    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.

    menu settings

    Also, is their documentation for the Split template?

    Thanks in advance.

    #2186942
    Fernando
    Customer Support

    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. 🙂

    #2186953
    Peter

    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.

    https://bigpetestropfish.com/

    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

    #2186964
    Fernando
    Customer Support

    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! 🙂

    #2197327
    Peter

    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

    #2197421
    Ying
    Staff
    Customer Support

    Hi Peter,

    Here’s a good guide about flexboxCSS:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Hope it’s helpful 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.