Floating logio above vs below with transparent background

[Tim]

Hi,
I would like to build a header similar to this site (https://www.sutrads.com/). I would like to have aspace above the main nav bar with logo floating above the nav bar.

Also the logo scales down correctly but does not scale up smoothly. The site I need assistance with is https://www.midcitiesdentist.com/.
Thanks!

[David]

Hi there,

can you first enable the Merge with Content option in the Header Element, then i can help with the CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tim]

HI David,
Element is merged per your request. Would it be possible to also allow changing of transparency to the header BG color?
Thanks!

[Tim]

Ignore transparency request.

[Tom]

Hi there,

Try this:

#site-navigation {
    margin-top: 50px;
}

Then, replace this:

.navigation-branding img, .site-logo.mobile-header-logo img {
    position: absolute;
    height: 120px;
    top: 0;
}

With this:

.navigation-branding img, .site-logo.mobile-header-logo img {
    position: absolute;
    height: 120px;
    bottom: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts