Mobile header

[camind]

hi,

Can I somehow adjust the thickness of the mobile header only. Seems like the mobile version of the header is to thick. see attachment.

Thanks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
#header-sticky-wrapper{
height:60px !important;
}
#header-section.header-6 #header{
padding:0px !important;
}
}

Thanks
Mohammad

[camind]

hi,

That css code did not change the height of the header at all. I even tried changing the height code higher and lower then 60px and still no change.

Thanks
Chris

[Rui Guerreiro – SUPPORT]

Hi,

This is what I’m seeing at the moment. Looks smaller than your initial screenshot.
Are you seeing the same? Can you try to clear the cache and try again?

-Rui

[camind]

Hi,

Actually i had deleted the css code right before sending you the previous message so its couldn’t be smaller…maybe just looks like it. But I have just added the css code in again and replaced 60px with 20px just so we can see a drastic change. It actually slightly looks smaller but prob by only 5px or so. It seems that it wont get smaller after a certain size for some reason.

Thanks

[camind]

hi,

I found the issue….. in theme options under header options logo height i set to 42. When i set that height i guess it stops any further adjustments with css. So in order for me to adjust the header height I must first adjust the logo image to perfect height then I can further adjust mobile header height or so i hope at least???????

thanks

[camind]

Hi,

After re-sizing the logo it actually made the header thinner. But the css code makes it thicker again. So I had to remove the css code. Any way to make the mobile header even thinner other then the css you gave me before?

Thanks

[camind]

Update,,,,

I cannot re-size logo to be smaller because it effects quality of logo to much….so i am in the same situation as before. Css that was given to make mobile header smaller does not work. or at least doesn’t make it thin enough.

What else can i do to make the mobile header thickness smaller?

Thanks

[Rui Guerreiro – SUPPORT]

Try the code below.

@media only screen and (max-width: 767px){
#header-sticky-wrapper {
  height: 50px !important;
}
.header-container > .row, .header-5 header .container > .row, .header-6 header > .container > .row {
  height: 0px!important;
 
}
.header-6 #logo, .header-7 #logo {
  margin-top: -10px!important;
}
}

-Rui

[camind]

Hi,

Yes that css code worked. You are great.

Thank you so much

[camind]

hi,

Sorry to keep bothering you but i noticed something is definitely not right with my header.

I removed all css that has to do with the header. Then I put a small logo and made it even smaller height. Then I compared my header size to the dante demo size on mobile. And even with a smaller logo my header is far thicker then the demo.

So i was thinking instead of using all kinds of css to fix it maybe we can find the problem first then it will be easier to adjust. Why would my header be thicker even when my logo is 2 times smaller then demo?

See attachment of my header vs demo header.

Thanks again and sorry to bother you again.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

#header-section.header-6 #header{
padding:0px !important;
}

#header-sticky-wrapper{

height:30px !important;
}

Thanks
Mohammad

[camind]

Thanks figured out a way to solve without css.

Appreciate all the help 🙂

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
Thanks 🙂
With Best Regards
Mohammad