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

Home Forums Support Creating Top bar and transparent Header/Navigation

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #599700


    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)




    GeneratePress 2.1.2
    GP Premium 1.6.2
    Customer Support

    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:

    4. Mega Menu
    This article explains how to build a simple mega menu



    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,


    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.