Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #998584

    Hi,

    How do I make the header thinner on mobile and tablet?
    Here is an image of the current header: https://ibb.co/fCPWHe

    Also, how can I make the header appear ABOVE image banners? Right now the header is hiding a part of the image since it is ON the image.

    Thanks!

    #998664

    Hey atifaijaz123,
    I took a look at your page and saw that your logo was too big for the header, as it was extending down over the image, so this css make it smaller along with the header.
    Please try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 770px) { 
      #header {height: 80px !important; }
    .responsive #top #header .logo,.responsive #top #header .logo a,.responsive #top #header .logo img {max-width: 120px !important; }
    
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #999871

    Thanks for the response Mike! This worked for making the header and logo smaller, but there is a second part to my question:

    How can I make the header appear ABOVE image banners? Right now the header is hiding a part of the image since it is ON the image.

    Thanks!

    Regards

    #1000100

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    .responsive #top #header .logo, .responsive #top #header .logo a, .responsive #top #header .logo img {
        max-width: 150px!important; 
    }

    Am I looking at the correct page? Please see the link in the Private Content area.

    Best regards,
    Mike

    #1000819

    Hi Mike,

    Thanks for the code, but it doesn’t seem to have any effect. This behaviour occurs on every page but is most evident on mobile. Let me show you a picture of the current state and the desired state:

  • https://imgur.com/a/HeI7cB0
  • Thanks!

#1000848

Hi atifaijaz123,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css


@media only screen and (max-width: 767px) {
    .responsive #top #main {
        padding-top: 100px !important;
    }
}

If you need further assistance please let us know.

Best regards,
Victoria

#1000880

Thanks Victoria! This worked. You may close this thread now.

Best Regards

#1000894

Hi,

I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

Best regards,
Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Mobile Header Height and Position’ is closed to new replies.