Hanging Logo - Mobile Navbar Situation

Support
#1

Hi,
I am trying to achieve a header design with a hanging logo as in the preview image. I used position: relative for .x-brand and put the logo down manually. I also had to shorten the navbar max-height. So far so good.

But now on mobile (when burger icon appears), the menu items appear outside of the navbar (overlaying the content area). The navbar doesnt scale automatically to contain them. How do I fix this? I think I have to use some @media property but I couldnt get it work.

Thanks in advance.

#2

Hi @cndrk,

Thanks for reaching out.

Yes, you’ll have to use @media, how did you add the max-height? You should use class base styling for that, example,

@media (min-width: 980px) {
.x-navbar {
max-height: 50px;
}
}

And that CSS should be added to the global custom CSS, and that one make sure your CSS is added on desktop view only (min-width:980px).

Thanks!

#3

Oh, I wasnt writing the code in global css, now it works, thanks. But there comes the second problem:
In this mobile view case, I need to use another version of the logo. Is there a way to show a different logo on mobile devices with screen width below 980px?

#4

Hi there,

Yes it is with some custom CSS.

Please try:

@media (max-width: 979px) {
    .x-brand img {
        opacity: 0;
    }

    .x-brand {
        background-image: url(URL_OF_THE_MOBILE_LOGO);
    }    
}

Please change URL_OF_THE_MOBILE_LOGO to the complete file path of the image.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Here are some related links of the suggestions above for further reading:

Hope this helps.

#5

Thank you very much for your code and useful informations. Everything works like a charm for now :slight_smile:
Have a nice evening…

#6

You are most welcome. Have a great weekend. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.