Slider masthead

Support
#1

Hi.
On this page: http://test.blommenhofutbildning.se i have created a slider that is placed below masthead. The slider is visible behind the transparent topbar.
On this page: http://test.blommenhofutbildning.se/aktuella-utbildningar-2/ another slider is also placed below masthead. But it is not visible behind the transparent topbar.
Where do I change this? I want them to be visible behind the masthead as on http://test.blommenhofutbildning.se

Tomas

#2

Hello Tomas,

Thanks for asking. :slight_smile:

Reason why slider is displaying under topbar in home page is because you have added following CSS code that’s applicable to home page only:

.home .masthead {
    position: absolute;
    width: 100%;
}

Above code will work only for home page because of .home selector that you have added. In case you want the change to be applicable across the website, please replace the CSS code you have added with following:

.masthead {
    position: absolute;
    width: 100%;
}

Here is a screencast that you can take a look.

Thanks.

#3

Perfect. Thanks. The code that I had written was actually from your latest support reply regarding topbar. I was probably not clear enough of what I wanted:slight_smile:

Anyway: Always a pleasure to be in contact with your support.

Tomas

#4

Hi Tomas,

On behalf of my colleague, you’re welcome.

Cheers! :slight_smile:

#5

:slight_smile:I realise now that I do not want that css code applicable on the news page (since the news post will be covered by the menu and topbar). would it be possible to add these extra lines:
.news .masthead {
position: absolute;
width: 100%;
}

Where i would like to exclude the news page from the other masthead code. If so - what would I write instead of absolute and 100%?

#6

Hi there,

If you want the code to take effect on all pages of the site except the news page, you may use:

body:not(.single-post) .masthead {
    position: absolute;
    width: 100%;
}

You can find more information about the CSS :not selector here:

https://www.w3schools.com/cssref/sel_not.asp

Hope this helps.

#7

Hi. I placed the code in the css but unfortunately it didn’t work. Can you take a look at these pages: http://test.blommenhofutbildning.se/news/
and also: http://test.blommenhofutbildning.se/events/entreprenadjuridik/ where you can se that it looks strange when the pictures is underneath the menu and topbar.

Tomas

#8

Hi Tomas,

Since you only want the effect on the pages (except news page), and not on the blog posts and events posts, please update the given CSS code to this:

body:not(.page-id-400).page .masthead {
	position: absolute;
    width: 100%;
}

In layman’s term that CSS code means, apply this styling to all pages only, except the page with id-400, which is your news page

How to find the right selector
How To Locate Page IDs

Hope that shed some lights,

As you can see, this is now becoming complex, further customization from here would be outside of the support that we can offer.

Thank you for understanding,
Have a nice day

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.