Removing gray menu bar on mobile site

Hi @chelseaedson0056

The empty space below the slider happens because of height in this CSS code:

.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
    display: table;
    height: 300px;
    height: 75vh;
    width: 100%;
}

Both 75vh and 300px is too large for your slider,as it’s only 113px on a 375px wide mobile (like an iPhone 8).

Did you add your slider with this method: https://smartslider3.helpscoutdocs.com/article/1640-twenty-seventeen-theme ?
If not, can you try it?

You might also need a different CSS code. I think this would work:

body.home.has-header-image.twentyseventeen-front-page div.custom-header {
    height: auto;
}

Thank you!

Hi,

This only removed the header from the mobile home page , but not the other mobile pages of the website.

Hi @chelseaedson0056

The problem I currently see on your other pages is that, you still have the 300px height used on the element with the class: .custom-header

You could override it with a stronger CSS like:

header#masthead div.custom-header{
  height: auto;
}

Note:
The reason your header doesn’t show up on mobile devices with auto height is that, the other container element of the slider: .custom-header-media has absolute position specified in this CSS:

.custom-header-media {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

So you should also override that with another CSS like:

header#masthead div.custom-header .custom-header-media{
  position: relative;
}

Note:
If you want these CSS codes to affect only on the mobile view, then you could wrap these in CSS Media Queries:
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

Best regards,
Laszlo.

I don’t want the slider header to show up on the mobile site.

When I edited it through the theme editor, it was only successful on removing the slider header on the homepage.

I do wish on the mobile site for the header to not be there. Am i editing it through the additional CCS in the slider app?

Hi @chelseaedson0056

Yes, you should insert the custom CSS into the slider at Slider Settings > Developer tab > CSS: https://smartslider3.helpscoutdocs.com/article/1294-slider-settings-developer
in that way the CSS is loaded on all the pages where that slider is published.

Note:
If you want to hide the header on mobile view, then you should use display: none; instead: https://www.w3schools.com/cssref/pr_class_display.asp
with media queries. Hiding an element with position absolute is a bad practice.

Here you can find some examples of how you can use media queries to show/hide a slider depending on the screen size: https://smartslider3.helpscoutdocs.com/article/1314-show-hide-sliders-based-on-screen-size

Please note that, we can not provide support for custom styling, but this CSS will most likely solve all of your problems:

header#masthead div.custom-header{
  height: auto;
}

header#masthead div.custom-header-media{
  position: relative;
}

/* Hides the slider from screens smaller then 440px*/
@media screen and (max-width: 440px) {
  div.custom-header-media{
    display: none;
  }
}

and it will also hide the slider on screens narrower than 440px.