header on mobile

Hi BeTheme,

http://new01.hsbp.nl

On mobile How can I keep the same Header (as on desktop view) with overflow logo:
- header bg white with menu-hamburger in middle
- sticky and not with large white padding below (on mobile), or totally disappearing

image

Comments

  • Hi,
    1) All possibilities of responsive menu are in Theme Options > Responsive > Header
    2) Paste this Custom CSS into Theme Options > Custom CSS & KS > CSS
    @media (max-width:767px){
    body:not(.template-slider):not(.header-simple) #Header{
    min-height:0 !important;
    }
    }

    Thanks.
  • almost there, thx!

    Q: please do show fixed header on mobile views — not small & hamburger too high up 
    for instance @ view port width 1007 px

    Like when scrolling body content upwards
  • Please paste this Custom CSS code
    @media (min-width:767px) and (max-width:1240px){
    .top_bar_left{
    min-height:60px;
    }

    #Content{
    margin-top:25px;
    }
    }
    Thanks
  • edited September 2018
    Sorry to bother you again, and maybe I have done wrong settings but: 
    - on mobile I can see (and by inspection) …

    @media only screen and (max-width: 767px), all
    responsive.css:693body:not(.template-slider):not(.header-simple) #Header {
    min-height: 350px;
    background-position: center 202px;

    Which causes the content starting under header far too low / not visible.

    Let me try to explain what I would like to see:
    1 - desktop view: fine (= logo overflowing small-height menu, fixed header )
    2 - mobile views: would like to see same behavior: (= small logo overflowing small-height menu-bar, fixed header)
    3 - do I need to start over and make use of Subheader (with white bg color?) to force content downwards on all pages, see my pages (now starting under Header fixed)

    4 - only adjustment to make is on Home page where I start with Slider Rev ?
    5 - or make on every page an Section/Padding for the content? Then how to adjust for Mobile views

    Hope you can help me out here, much appreciated!
  • Hi,
    Please delete this comments, they are interrupting the CSS code.

    Also, paste this CSS code:

    @media (min-width:767px){
    body.blog #Content{
    padding-top:160px;
    }

    body.page-template-default:not(.home) #Content{
    padding-top:160px;
    }
    }
    Everything will be fine now.
    Thanks.
Sign In or Register to comment.