[Resolved] Double Navigation

[David]

If you could add a logo that includes Logo+Kundenbereich – that would be the simplest way 🙂

[Erika]

I did.

1) Now I can add the CSS
.navigation-branding img, .site-logo.mobile-header-logo img {
height: 50px;}
to avoid the transition. This displays the image the same way like in case you scroll down.

How do I add a new link to this image? Now it links to the homepage.

2) Can we hide nav-title and align-left in the drop down menu completely and change padding-top, so that no empty space appears in their place?

[David]

1. Ok maybe the Logo thing wasn’t a good idea. If you can switch it back to the logo without the text, ill provide some code to hook in the text with a different URL.

2. Edit both those menu items, in the CSS class field, after each class include hide-on-mobile
There needs to be a space between them eg.

nav-title hide-on-mobile

[Erika]

1. Done
2. Also done.
But very strange, no matter what changes I make, I can see the changes in the preview in the backend on desktop, but they do not show on other tablet or mobile devices.

[David]

apologies your last reply got lost in our system.
Looks good to me 🙂 –

So now for mobile navigation:
1 add a Logo in Customizer > Layout > Mobile Header.
2. Create a new Hook Element in Appearance Elements:

https://docs.generatepress.com/article/hooks-element-overview/

2.1 Add your link to and text to its content using HTML:

<a class="nav-title" href="add-your-url-here">You link text</a>

2.2 Select the generate_inside_mobile_header hook
2.3 Set the Display Rules to Entire site.

Once thats done let me know and ill provide the CSS for the mobile layout

[Erika]

Hi David, no problem, I truly love to work with you. I´m done.

[David]

I am not seeing the Logo or the element added by the hook ?

[Erika]

Same problem like a few days ago, they are added. I can see them. Pls take another look, it looks like it takes a little till it appears at you. Cache?

[David]

And its back 🙂

So try this this CSS for mobile header:

#mobile-header .inside-navigation {
    justify-content: initial;
}
#mobile-header .nav-title {
    margin-right: auto;
    color: #000;
}

[Erika]

Perfect, thank you so much, David! I learned a lot 🙂

[David]

Glad to be of help!

[Author]

Posts