[Resolved] Creating specific header

[Max]

All right – that might be something. I enabled the widget area and added the “navigation” widget without adding any menu (although I guess that any kind of widget will do) and so far there is only a grey bar (see page).

I suppose I have to add some code in order to make this one semi-transparent/alter the padding? Although that would be altering the specifications of one specific widget and not the top widget area I guess. On the other hand I do not see any field / option as to where I could do that.

Also, since I was stuck with two menus, I disabled the secondary menu again and moved the primary menu below the header (via the header-elements specifications). I also tried rewriting your php snippet (simply replacing “secondary navigation” with “primary navigation” but I suppose it could not have been that easy since the primary navigation bar still shows up in the middle of the header 😀
So I am basically almost back to square one. Can you hint at how I could move the primary navigation bar to the bottom of the header just like we did with the secondary one?

Much obliged!

[Leo]

Have you checked out this article?
https://docs.generatepress.com/article/top-bar-widget-area/

As for moving the primary navigation, you were close 🙂
https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568

[Max]

Haha ok – that widget article did the trick for the top bar thanks! 🙂

And for a second I thought the job would have been finished. Oddly enough, the transparency seems to have disappeared. I checked both settings (colours –> primary navigation and elements –> site header) and in both cases the semi-transparency has been set and the “merge” function enabled. Nonetheless the menu appears to be opaque instead of semi-transparent. This changed after adding the php snippet.
Do you know what might have caused this?

[Leo]

Replace this existing CSS:

.secondary-navigation {
    margin-top: -60px /* Adjust this number to match the height of the navigation */
}

with this:

.main-navigation {
    margin-top: -60px /* Adjust this number to match the height of the navigation */
}

Let me know 🙂

[Max]

That did it! Thanks a lot Leo – I have seldom encountered a support team that made such an effort!

[Leo]

No problem!

Glad I could help 🙂

[Max]

Hi Leo!

I reopened the support topic since I believe it is the fastest way to solve the new issue.
I am using the latest GP premium.

1.) After we built an individual header for my site I wanted to make the menu items a bit thinner, horizontally. So I adjusted the according height to 43px (primary and secondary navigation). I also adjusted the height of the margin-top value which you provided.
The problem I have now only appears on mobile: There is a “free area” above the black semi-transparent stripe which displays the menu. Once you change your browser to display the mobile version of the website you will immediately see what I mean. Is there a way to remove that “free space”?

What I wanted to do initially is: I wanted to let the mobile (burger) menu expand but only until the lower edge of the header – not beyond (as in: It should stop before the white space.). Maybe there is another way of accomplishing that but for now I simply adjusted the height of the single menu items.

2.) I noticed that the page title jumps to the left while the navigation search and burger menu are displayed on the right of the screen. Is there a way to reverse it, meaning: Can I let the title be displayed on the right and the rest of the menu to the left? Additionally, is there a way to display the page title in the middle of the header (and not on the black semi-transparent bar) like it is being displayed on the desktop version?

Best wishes

[Leo]

1) Are you trying to remove this space here?
https://www.screencast.com/t/lq2RZG7g5Oi

If to try this CSS:

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

2) When you say page title, are you referring to the title Cultural Insight?

[Max]

1.) Exactly – that space should be removed. I applied your code but it basically broke my mobile menu – you will see that immediately if you reduce the size of the browser window. First the complete menu disappears until the browser is small enough to match the size of a mobile phone. Then the burger menu appears but the page title and the navigation search are gone.

2.) Exactly – the title of my website.

If you need to see the code I added via Simple CSS (and the custom header we made) and cannot see it completely via the web inspector I can give you the login data.

[Leo]

1. Try editing this CSS:

.main-navigation {
    margin-top: -43px /* Adjust this number to match the height of the navigation */;
}

to this so it’s desktop only:

@media (min-width: 769px) {
    .main-navigation {
        margin-top: -43px /* Adjust this number to match the height of the navigation */;
    }
}

2. Try this CSS:

@media (max-width: 670px) {
    .main-navigation.has-branding .menu-toggle {
        order: 1;
    }
    .main-navigation .mobile-bar-items {
        order: 3;
    }
    .navigation-branding {
        order: 2;
    }
    .nav-aligned-left .navigation-branding {
        margin-left: auto;
    }
}

[Max]

Hi again!

1.) Problem solved – marvelous – thank you!

2.) That basically works but now I have the issue that bar which contains the navigation search, the burger menu and the website title looks a tad ugly – at least when it comes to their order or arrangement. Is it possible to move the page title to the center, the burger menu to the left edge and the navigation search to the right edge?
If that is too complicated it would already help to switch the position of the burger menu and navigation search.

3.) I noticed a connected issue. At around 1437 px screen width the first breakpoint happens – then the top (semi-transparent) bar disappears, the page title becomes smaller and the menu goes from semi-transparent to simply gray. That looks quite ugly (I think the menu gets moved below the header). If you reduce the width of the browser window even further to just above 1251 px the magnifying glass jumps below the menu, creating another gray bar which…of course does not look good. Is there any way to influence the behaviour of the header/menu so that the gray bar does not appear? At the moment the breakpoints look kind of clumsy. I’m aware that normally users would not see them but if someone with the according browser window/screen size comes along it would make for quite a bad impression.

[Leo]

2) Try the edited CSS in #2 here:
https://generatepress.com/forums/topic/creating-specific-header/page/2/#post-966394

You will notice that it’s offset a little but can be fixed if you remove the mobile menu label:
https://docs.generatepress.com/article/mobile-menu-label/

3) I don’t see this issue at 1437px. Can you show a screenshot of what you are seeing?

Sometimes the responsive mode is tough to deal with for a unique layout like this.

[Max]

2.) Problem solved – it looks great now. Thank you!

3.) Here is a screencast which displays the problem (I do not know why but it did not play when opening the link – I think you have to download the gif file.):

https://www.dropbox.com/s/5cn5omsrj7hgb2k/Menu%20breakpoint%20gray%20bar.gif?dl=0

[Leo]

Looks like you’ve changed the mobile breakpoint?

What if you use the default 768px?

[Max]

Hm yeah that seems to be the easiest solution – for now I think it is best to leave it at that.
I had to adjust the numbers a bit since my menu is a bit too large for the 768px breakpoint. Now that I have compressed the menu a bit more a smaller breakpoint should work as well.

Thanks Leo!

[Author]

Posts