Creating Site Header in Mobile version same as that of Desktop version

Sydney
#1

Hi,

Thanks for the great support for this awesome theme, I would like to make the site header same as like in Desktop version that is logo and Menu button on the top of the Image slider. Is there any way to achieve this.
I have changed the default positions of logo and the Menu button, for my site the logo is top-left aligned and Menu button aligned on the right side. Both of them are at same height from the top.

Please find the attached screenshot of my mobile version also.
https://drive.google.com/file/d/1FXcHw9HQ9rXVOaygSfX0DK2O9ziUQgjw/view?usp=sharing

Kind Regards,
Vince

#2

Hello there,

It looks like one of our users had asked about this in this topic. Please follow the solution I’ve posted in there. I hope you can find it helpful.

Regards,
Kharis

#3

Hi Kharis,

Sorry, what I intended was the site header to be transparent like in desktop version so that visually the logo has to come on top of the image slider with left aligned (I have achieved the left alignment) and Menu button also needs to be on top of image with right aligned like I have shown in the screenshot.

When I used the following code to display the Menu text with menu button the text came after Menu button, I would like to have it before and this needs to come up only in Mobile version and also needs to adjust the font size of the Menu text.

jQuery(function($) {

  $('.btn-menu').html('<span>Menu</span>');

});

Thanks for helping.

Kind Regards,
Vince

#4

Hello there,

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

    @media only screen and (max-width:1024px) {
      
      .site-header,
      .site-header.fixed {
        background-color: transparent;
        position: absolute !important; 
      }
      
      .header-wrap .container{
        text-align: left;
      }

      .header-wrap .btn-menu{
        float: right;
        margin-right: 15px;
      }  

      .header-wrap .col-md-4 {
        max-width: 90%;
        position: relative;
        z-index: 2;
      }

      .header-wrap .col-md-8 {
        margin-top: -50px;       
      }        

      #mainnav-mobi {
        top: 70px;
      }  
      
    }

Then add this CSS code to change the position of the “Menu” text and change its font size.

    .btn-menu span {
    	font-size: 16px; 
    }  
    .btn-menu:before{
    	content: "";
    }
    .btn-menu:after{
    	content: "\f0c9";
    }

Regards,
Kharis

#5

Hi Kharis,

First of all thanks for the great support for this wonderful theme,
When I applied the mentioned code the result I got is something different, Please check the attached screenshot of the mobile version in which the site header is not transparent and I would like to move the Menu text and Menu button shift little bit towards center so that both are clearly visible, I tried to change the margin-right: 25px; . on the above code , But it didn’t have any effect at all.

https://drive.google.com/file/d/1hBzld_M1GEwOzc572XiAqrFYcH4HjQ6O/view?usp=sharing
Kindly check and share your ideas.

Kind Regards,
Vince

#6

Hello there,

Please try replacing the code I suggested with this one which works great to me.

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

     .site-header,
     .site-header.fixed {
       background-color: transparent;
       position: absolute !important;
     }

     .header-wrap .container{
       text-align: left;
     }

     .header-wrap .btn-menu{
       float: right;
       margin-right: 45px;
     }

     .header-wrap .col-md-4 {
       max-width: 90%;
       position: relative;
       z-index: 2;
     }

     #mainnav-mobi {
       top: 70px;
     }

    }

    @media only screen and (min-width:768px) and (max-width:1024px) {
      .header-wrap .col-md-8 {
        margin-top: 0;
      }
    }

    @media only screen and (max-width:767px) {
      .header-wrap .col-md-8 {
        margin-top: -100px !important;
      }
      .header-wrap .btn-menu {
        margin-right: 55px !important;
      }
    }

    .btn-menu span {
      font-size: 16px;
      padding-right: 10px;
    }

    .btn-menu:before{
      content: "";
    }
    .btn-menu:after{
      content: "\f0c9";
    }

If you have other custom CSS code priors this, try validating it with this tool. Ensure that it doesn’t produce any error.

Regards,
Kharis