Navigation layout tabs seperated by vertical lines

Hi there,

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

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;
}

https://imgur.com/teOh60E

I really would like to see some more header and navigation style settings as the options are rather traditional ;-)

Regards
Carsten

Hi Guys,

I just came here to ask almost the same for this page: Testpage :D

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:
https://imgur.com/pk1nkFK

Normal Menu:
https://imgur.com/a/y56blcT

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! :)

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 :)

Thanks Tom, it looks great!

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.

https://imgur.com/5dL49R3

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

vertical lines..

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

https://imgur.com/nLB8FxI

Hi there,

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

@media (min-width: 769px) {

CSS in here

}

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

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;
    }
}

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?

There is no response to the Right Left header Padding

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.

Thanks