[Resolved] Include a widget or shortcode inside header above right floating menu

[Mildmac SA (ESA78960895)]

Hi,
I´d like to do something I don´t know if it´s possible. I am developing a site with GP & elementor.
I want a header including logo at the left and then two rows: one for a widget with an elementor shortcode and other for the menú navigation (see picture “what I want”).

Now, as you can see in the URL site, there is a GPHook on top of header (see picture “now”), but the customer wants the logo larger. I send you 2 pictures explaining what I need

https://postimg.org/gallery/2zsdmxbhg/

Is it possible to achieve? To include a widget or html code above the navigation. The behavior when scrolling must be the same as now

Thanks

Rafael

[Tom]

You could do something like this:

.site-logo img {
    bottom: 20px;
    position: relative;
}

You’ll need to upload a slightly larger logo for the effect to work better though 🙂

[Mildmac SA (ESA78960895)]

Thanks. Changed and OK. But then sticky navigation logo does not appear and instead it seems to appear the normal logo but displaced up. And in responsive modes (tablet and mobile) it´s a mesh, beacuse logo is above everything. Is there a way to filter the mode in we are in to change logo dimensions and position?
Thanks Tom

[Tom]

Give this a shot:

@media (min-width: 1100px) {
    .site-logo:not(.navigation-logo) img {
        margin-top: -50px;
        position: relative;
    }
}

[Mildmac SA (ESA78960895)]

Great Tom. Thanks. Just one more thing:
How could I then reduce the header bottom gap? I set bottom padding to 0 and looked for any class to change a parameter, but without success
See attached picture here: https://postimg.org/image/nfvfyym8j/
With this I guess everything would be ok for me
Thanks a lot
Rafael

[Tom]

I just adjusted the CSS above – can you give it a shot?

[Mildmac SA (ESA78960895)]

Yes!! Now it´s OK. Thanks.
Can I ask for another thing here (cause it is the same site)
I don´t know what happens with hamburguer menu icon in mobile mode. It is not visible at first, but in fact it is there, beacuse I click on blank and dropdown menu opens and it comes visible. Then when it collaps then the icon is visible forever. It happens with all mobile devices and even with chrome resized.
I review color setups, CSS but everything seems to be ok
Have you got an idea? Any clue?
Thanks

[Mildmac SA (ESA78960895)]

Sorry Tom. I got it…
I found this lost out there …

.main-navigation .menu-toggle {
color: #FFFFFF;
}

Just remove it and obviously now it is visible

Thanks
Rafael

[Tom]

No problem! 🙂

[Author]

Posts