Menu in mobile view


#1

We don’t use a logo and have loaded a transparent picture instead.

First:
In mobile view, the hamburger menu gets more space to the top as the menu in desktop view. How to get the extra space and the logo line away in mobile view?

Second: I like to move the hamburger in mobile view to the right instead of center.

Where can I find the right places in which .css to change that?

Thanks!


#2

Post a link to your site please so I can see exactly what you have and how it will work for you.


#3

#4

Use this in a custom CSS plugin please to handle both customizations:


@media only screen and (max-width: 1024px) {
   .site-header .col-md-4 {
       display: none;
   }
   .btn-menu {
      margin: 0 15px 15px 0;
      display: inline-block;
  }   
  .header-wrap .col-md-8 {
     text-align: right;
  }
}


#5

Thanks!

I have pasted your code in /themes/sydney-pro/style.css in

@media only screen and (max-width: 767px) {

and changed the margin to

   .btn-menu {
      margin: 0 15px 0px 0;
      display: inline-block;