Tagged: , , , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 17, 2018 at 9:19 pm #998584
    atifaijaz123

    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!

    August 18, 2018 at 9:04 am #998664
    Mike

    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

    August 21, 2018 at 3:54 pm #999871
    atifaijaz123

    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

    August 22, 2018 at 1:56 am #1000100
    Mike

    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

    August 23, 2018 at 4:24 pm #1000819
    atifaijaz123

    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!

August 23, 2018 at 5:42 pm #1000848
Victoria

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

August 23, 2018 at 6:53 pm #1000880
atifaijaz123

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

Best Regards

August 23, 2018 at 7:06 pm #1000894
Jordan Shannon

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

  • Author
    Posts
    • Viewing 8 posts - 1 through 8 (of 8 total)
    • The topic ‘Mobile Header Height and Position’ is closed to new replies.