[Resolved] Navigation layout tabs seperated by vertical lines

[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

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Carsten]

Thanks Tom, it looks great!

[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

[Carsten]

vertical lines..

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

View post on imgur.com

[David]

Hi there,

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

@media (min-width: 769px) {

CSS in here

}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Carsten]

There is no response to the Right Left header Padding

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Carsten]

Thanks

[Author]

Posts