Menu on top of first row


Currently my site looks as above,I would like to place the menu without background on top of the header image (using the siteorigin header widget), or in other words integrate the menu into the header. Is this possible?

Hi,

Please post a link to your website, so I can give you a working solution to make the menu background transparent.

Kind Regards,
Csaba

Thanks for the quick reply!
The link is lailavanments.com/menu

Hi,

You can show the menu on to of the header image and also to add more space on top of the header, to don’t cover the actual header with the menu with this Custom CSS:

.page-id-15 .site-header.fixed {
    background: transparent !important;
}

#pl-15 #panel-15-0-0-0 {
    margin-top: -115px !important;
}

.page-id-15 .so-widget-lsow-hero-image-default-f81bf4c7171c .lsow-hero-header {
    padding-top: 210px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

THank you that works!

Is there a way to give the menu a background when scrolling down? So it does not look like the picture?

*Solved: found this css snippet;

.site-header.float-header{
background-color: #000000!important;
}

Hi,
I just saw that the menu dissapeared on mobile. Is there anything I can do to solve that?

Hi,

Your menu was set as static on screensizes below 1024px, but you can fix that wrong position with this Custom CSS:

@media only screen and (max-width: 1024px) {
.site-header.fixed {
    position: absolute !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba

Hi!
Thanks :slight_smile:
The menu does show, but the header falls half off(on the home page)


Clearing the cache helps to show the normal picture for a second but then it goes back to cutting it off.
Any way to get this all on?

Hi,

The header image you’re using there isn’t high enough to contain the menu, but if you don’t want those issues, please add a background to your menu ( now it’s transparent ) with this Custom CSS ( please remove the previous CSS and use this one instead ):

@media only screen and (max-width: 1024px) {
.site-header.fixed {
    position: absolute !important;
    background: red !important;
}
}

Please let me know how it works.

Kind Regards,
Csaba