Section background image also displaying behind navbar

Support
#1

hey,

First off, great theme (builder), very impressive.

I am using ethos inside theme X (although I’m not tied to that necessarily). I have been searching around trying to work out if I can extend the background image I have added to section 1 of my page to also be the background image of the navbar above it.

Looking at the theme code, this doesn’t seem like something I can just add a div/header container around and then style accordingly (as section 1 is created using the_content()). Perhaps I need to force the image inside section 1 using top:0, position:absolute etc? Or is there a setting inside the theme to acheive this more easily?

Here is the live site (I realise this is a video but it is the same concept).

As an aside, and to complicate things slightly, I do not require this effect for every page type (lets say just the homepage and a couple of other templates currently).

cheers
david

#2

Hi David,

To achieve that effect on your home page, you can add the following CSS. To add it to another page, you need to repeat the selector but replace .home with the targeted page ID.

At the moment your slider content is overlapping the masthead, so you will need to make your slider height bigger and adjust the position of the elements. This will make sense for you once you apply the code.

.home .x-navbar,.home .x-logobar {
    
    background-color: transparent !important;
 border: 0px;
}

.home .x-main.full {
    
    margin-top: -186px;
}

.home .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
   
    border: 0px;
}

Hope it helps!

#3

Great, thanks. My site is actually a bit different now but with a bit of fiddling, that works a treat. Slightly concerned about using negative absolute margins but i can’t break it :slight_smile:

#4

Hi There,

It works well, nothing to worry :slight_smile:

Cheers!