Mobile Menu Position

Hi, Athemes Team!

Thanks for great theme. But I want to customize some things :slight_smile:

  1. How to change logo and menu positions in mobile version (now it have center position), i would like that logo will be placed in the left side but menu in the right side.
  2. If You will check my site http://weboptimus.eu/lv/musu-pakalpojumi/ You will see that the header zone partially close the banner zone (checked in iphone 4,5&6). How to solve this problem?
  3. I need that each page have different banner(revolution banner). what I have to do?

Thanks a lot

Hi,
you have to create a child theme to relocate your logo and menu in mobile version:
Here is the step:

  1. create a child theme
  2. duplicate header.php from parent theme to your child theme
  3. open your header.php and change this line:
    <div class="col-md-4 col-sm-8 col-xs-12"> to:
    <div class="col-md-4 col-sm-8 col-xs-6">

and change this line also:
<div class="col-md-8 col-sm-4 col-xs-12"> to
<div class="col-md-8 col-sm-4 col-xs-6">

then for different header image, you can follow this thread https://athemes.com/forums/topic/different-header-images/

Hello!

I have made the changes which You have recommend me, but i don’t get the good resultats.

  1. with logo position all is ok but with menu bar does not. Logo position is higher that menu bar. How to get logo and menu bar in one line?

  2. The header zone still little beat close the banner zone (checked in iphone 4,5&6). How to solve this problem?

  3. I think that this thread https://athemes.com/forums/topic/different-header-images/ not realy good for me, because I use in header zone Revolution Slider not a header image. So what I have to do to get the different Revolution sliders in each page?

That is a good question. I was actually going to ask how you moved the mobile menu position myself. Does anyone have any solution for this working properly? Thanks Guys!

Hi guys,

you can tweak it using css code. try this code below using custom css plugin:

@media only screen and (max-width: 767px){
  .btn-menu {
    margin-top: -10px;
  }

  .rev_slider_wrapper {
    margin-top: 90px !important;
    height: 150px !important;
  }

  .rev_slider_wrapper ul li {
    padding-top: 10px !important;
  }
}

Thanks for help!

But I have go any way :slight_smile:

I don’t change my header.php file

I have write this code in my custom css file:


/*Menu padding resize for mobile*/

@media only screen and (max-width: 768px){
.col-sm-8 {
    width: 50%;
    padding-top: 10px !important;
  }
}
@media only screen and (max-width: 768px){    
.col-sm-4 {
    width: 50%;
    padding-top: 5px !important;
  }
}

whhen the mobile phone is in vertical position - all is ok, but when i change the phone position to horizontal - i still have problem with header zone which still little beat close the banner zone. Maybe You have any ideas?

So and what about my third question (3. I need that each page have different banner(revolution banner). what I have to do?) ? I realy need help with this!

different banner(revolution banner)
Haven't read the rest of this topic, but this is something we will be adding soon as a page template.