Logo – Need this to fit on mobile device and show hamburg menu too

[sandyms]

Hi there! I am almost done with yet another site using Porto Html Template.

All is going well except only with my logo when I am on a mobile device. The logo is too wide and the hamburg menu is pushed off the screen.

If I turn my mobile device sideways, I like how I see it so I want that to stay the same.

It works nice on PC monitor and I am using the sticky sizing for the top navigation as you will see when you scroll down the page. So it is just the logo with the 3 images and name of the business that is my issue.

The site is not live but you will get to the site by going to the URL I sent you.

I am hoping I could add something easily to the custom.css to make this work but I am not sure if this will solve it.

Please help.

---

Template Version: 10.2.0

[Support]

Hi, you can set a max-width value for the logo, adding this css:

@media (max-width: 991px) {
	#header.header-effect-shrink .header-logo {
        width: auto !important;
        height: auto !important;
	}
}

@media (max-width: 991px) {	
    #header .header-logo img {
        max-width: 220px !important;
        height: auto !important;
    }
}

---

[sandyms]

Perfect! Thank you so much for this. I appreciate your help!

I changed the max-width: to 400px so that when I turn my mobile device sideways, it is a bigger sized logo.

Please let me know if you see any issue with it going to 400px. It works fine for me.

Once I hear back that it’s okay doing that, I will mark this feed as resolved.

---

[Support]

Hi, sure you can change those values and also add more than one:

@media (max-width: 991px) {	
    #header .header-logo img {
        max-width: 400px !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {	
    #header .header-logo img {
        max-width: 220px !important;
        height: auto !important;
    }
}

---

[sandyms]

That is a smart idea! Thanks so much!

Have a nice weekend!

---

[Author]

Posts