Reducing Menu Bar Depth for Tablets & Smartphones

  • Resolved nzluscombe

    (@nzluscombe)


    7 years, 2 months ago

    Hi, I am using the Sydney theme and the black menu bar is so deep it covers up to half of the homepage picture on tablets and smartphones. I have installed the ‘Responsive Menu’ Plugin which creates a hamburger menu icon where the menu swipes in from the left, but the existing (drop down) menu bar remains. Please could you let me know how to either remove the drop down menu bar for tablets & smartphones, or how to remove its black banner and only keep the hamburger icon. I’ve tried lots of tweaking, but haven’t found a solution. Many thanks!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hello there,

    Please add this CSS code to Appearance > Customize > Additional CSS from dashboard. 

    
@media only screen and (max-width: 800px) {
  .site-header .col-md-8 {
    display: none;
  }
}

    Regards,
    Kharis

    Thread Starter nzluscombe

    (@nzluscombe)

    Hi Kharis

    Many thanks for your quick response. I have done as you suggested but still the thick black banner appears and blocks out half of the homepage picture when viewed on a smartphone. The menu hamburger icon (three white lines in a black box) appears fine. Do you have any advice on how to remove this black banner, so that only the hamburger icon is showing?
    Thanks again
    Simon

    Hello there,

    Please try this CSS code: 

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

    Regards,
    Kharis

    Thread Starter nzluscombe

    (@nzluscombe)

    Hi Kharis
    Great – that worked! Many thanks for your help. However I have two menus appearing; the Responsive Menu Plugin menu (which is working fine) and the original menu (which you have helped me to remove the black banner from). The result is that the 3 horizontal white lines of the original menu hamburger icon are still visible in the centre on a smartphone screen, especially if they appear over some black text. Is there some way I can hide the 3 white lines from the original menu icon?
    Thanks once again
    Simon

    Hello there,

    Add this additional CSS code: 

    
@media only screen and (max-width: 800px) {
  .btn-menu {
    display: none;
  }
}

    Regards,
    Kharis

    Thread Starter nzluscombe

    (@nzluscombe)

    That’s fixed it! You’re a star Kharis! Many thanks again for your quick and helpful support. Much appreciated.
    Simon

    You’re welcome Simon.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Reducing Menu Bar Depth for Tablets & Smartphones’ is closed to new replies.