[Support request] Creating Top bar and transparent Header/Navigation

[Nenad]

Hi,

The theme is great and all.. one thing I’ve stuck on is creating top bar and transparent header/navigation mega menu.

Any thoughts on how to create menu similar to the menu on this page? (and top bar)

http://schule.cmsmasters.net/

thanks,

Nenad

[David]

Hi Nenad,

1. Navigation settings:
1a. Customiser > Layout > Primary Navigation. Set Location below header, and Align Right. Add navigation logo and set to Sticky and Static.
1b. Customiser > Sticky Navigation > Enable it.
1c. Customiser > Colors > Primary Navigation. These colors will be those displayed when Sticky. The next step will change that when its not.

2. GP Page Header
2a. Create new page header. Add content, background images etc.
2b. Advanced Tab > Select Merge with Site Header and then Place Content Behind Header
2c. Select and Set Custom Navigation Colors. Set these to transparent.

3. Top Bar
3a. This could be done with the Top Bar but lets use the Secondary Navigation. Customiser > Layout > Secondary Navigation set Location above header. Then head to colors and style it.
3b. For the menu, you can add FA Icons as custom links to that menu. And give them a class so we can then use some CSS to align them to the right. This article explains how:
https://docs.generatepress.com/article/adding-icons-to-menu-items/

4. Mega Menu
This article explains how to build a simple mega menu
https://docs.generatepress.com/article/building-simple-mega-menu/

[Nenad]

Hi,

Thanks, That worked, I’ve managed to do it on my test site.

Tell me if you know how to fix Internet Explorer CSS issue.

You can see it just by opening the site in IE. The main title is not centered.

alphacapitalis.com –> Internet Explorer

Thanks again,

Nenad

[David]

Hi Nenad,

sites looking good.
Ah, Elementor uses Flex box to vertically align the content. Which IE has problems with when the container is not given only a min / max height property. You can try this:

Give that Section a Class (Advanced Tab CSS Class): e.g my-custom class and the add this CSS:

.my-custom-class .elementor-container {
    height: 400px;
}

Change the height accordingly.

[Author]

Posts