[Resolved] Navigation layout tabs seperated by vertical lines

Home Forums Support [Resolved] Navigation layout tabs seperated by vertical lines

Home Forums Support Navigation layout tabs seperated by vertical lines

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #840531
    Carsten

    Hi there, I saw this simple navigation design where the tabs are separated by vertical lines alone. Can I achieve this simple layout with GeneratePress?

    View post on imgur.com

    Regards
    Carsten

    site login: password: developer

    GP Premium 1.7.8
    #840706
    David
    Staff
    Customer Support

    Hi there,

    do you have a link to the page that has the Tabs ?

    #840881
    Carsten

    Hi David, sorry I don’t have the link, as it was a design example in a screen dump.
    Apperantly it does not look that difficult to create with a border-right, which could be the solution, though the length of the menu tabs are not the same like in the example.

    .main-navigation .main-nav ul li a {
    padding-left: 20px;
    padding-right: 20px;
    line-height: 60px;
    border-right: solid 1px black;
    }

    View post on imgur.com

    I really would like to see some more header and navigation style settings as the options are rather traditional πŸ˜‰

    Regards
    Carsten

    #840892
    Philipp

    Hi Guys,

    I just came here to ask almost the same for this page: Testpage πŸ˜€

    I used the following css:

    .main-navigation li {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #f47522;
    }

    So i would like to have vertical lines too. It works great in the normal navigation. But in the sticky menu things get a little bit complicated The lines in the sticky menu get a lot bigger. How can i avoid this?
    :

    Sticky Menu:

    View post on imgur.com

    Normal Menu:

    View post on imgur.com

    I found the solution:


    @media
    (max-width: 1024px) and (min-width: 769px), (min-width: 1025px){
    .main-navigation.sticky-navigation-transition .main-nav > ul > li > a, .sticky-navigation-transition .menu-toggle, .main-navigation.sticky-navigation-transition .mobile-bar-items a {
    line-height: 20px;
    }

    .main-navigation.grid-container.grid-parent.sub-menu-left.stuckElement.is_stuck.navigation-stick.navigation-clone.sticky-navigation-transition .inside-navigation.grid-container.grid-parent .main-nav
    {
    margin-top: 15px;
    padding-right: 30px;
    }

    Thank you a lot in advance.

    Btw: Great theme! πŸ™‚

    #841093
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What if you did this?:

    .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
        content: "";
        width: 1px;
        height: 25px;
        background: #000;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        left: 20px;
    }
    
    .main-navigation .main-nav > ul > li.menu-item-has-children:not(:last-child) > a:after { 
        left: 0;
    }

    Let me know πŸ™‚

    #841143
    Carsten

    Thanks Tom, it looks great!

    #841144
    Carsten

    Now we are looking at the header – I got this issue that my logo is not exact in line with the nav menu but more in line with the top of the navigation bar.

    View post on imgur.com

    I have stated this issue before, but no solution or explanation which solves it, so far. I can rule out any custom CSS causing this.

    Regards
    Carsten

    #841181
    Carsten

    vertical lines..

    it looks great – except on mobile, where the vertical lines are not desirable:

    View post on imgur.com

    #841227
    David
    Staff
    Customer Support

    Hi there,

    wrap the code Tom has provided in a media query ie.

    @media (min-width: 769px) {
    
    CSS in here
    
    }
    #841240
    Carsten

    Hi David, thanks, I guess the optimal media query value would be the break point where the menu turns to hamburger menu. Apparently it is not possible to see or set this value in the Primary Navigation settings?

    Any comments to my logo alignment issue?

    Regards
    Carsten

    #841254
    David
    Staff
    Customer Support

    The Mobile nav kicks in at 768px by default.
    In GPP 1.8 there will be the option to set the breakpoint when the Mobile Header kicks in.

    The best way to keep your logos inline is to set the Navigation as Header:

    https://docs.generatepress.com/article/navigation-as-a-header/

    Alternatively add this CSS:

    @media (min-width: 769px) {
        .inside-header {
            display: flex;
            align-items: center;
        }
        .site-logo {
            margin-right: auto;
        }
    }
    #841262
    Carsten

    The media query did the trick, great

    Navigation as Header – definitely a much better way to add the logo than under Site Identity. thanks!

    Apparently it is not possible to ad padding to the left of the logo under settings, the logo is sitting without space to the edge of the container?

    #841264
    Carsten

    There is no response to the Right Left header Padding

    #841266
    David
    Staff
    Customer Support

    The logo has a default 10px all round. Which i can see, you may need to clear your browser cache. If you want to add more to the left you could do this:

    .main-navigation .navigation-logo img {
        padding-left: 20px;
    }

    Include that CSS within the media query you have for your other menu styling so it only applies to desktop.

    #841299
    Carsten

    Thanks

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