logo issue

[vasuboy]

I’m trying to use a larger logo and it’s coming outside of the header section. How can I force the logo to be inside the logo container ?

---

[Support]

Hello, great, to change the logo size add this css:

(css/custom.css)

@media (min-width: 991px) {
	.header {
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	html.fixed .sidebar-left {
		top: 90px;
	}
	
	html.fixed .page-header {
		top: 90px;
	}
	
	html.fixed .inner-wrapper {
		padding-top: 140px;
	}
	
	.header .logo img {
		width: 150px;
		height: 70px;
		margin-left: 65px;
		margin-top: -13px;
	}
}

Please note that I set the logo with 150×70 in the css but you can change that.

* Works for classic demo

---

[vasuboy]

Hi,
Thanks for your response. This is not working.
I’m using the layouts-left-sidebar-big-icons.html file.

Here’s the link to the screenshot:
https://drive.google.com/file/d/1b8phZZE6kjzEUk29olPBq-GRPYpy-R0d/view?usp=drive_link

My logo is 271×177 so, I changed the last style in custom.css to :

.header .logo img {
width: 271px;
height: 177px;
margin-left: 65px;
margin-top: -13px;
}

Let me know if you have any questions.

---

[vasuboy]

Here’s the link to the screenshot:
https://drive.google.com/file/d/1b8phZZE6kjzEUk29olPBq-GRPYpy-R0d/view?usp=sharing

---

[Support]

Hello, could you please provide a link of your admin so we can access here and provide the changes? Thanks.

---

[vasuboy]

Hi! I am still working on this on my local computer and haven’t uploaded to a server yet. I have just downloaded the files received from you and tried to update the logo, haven’t changed anything else. Can you please help me resolve this logo issue as soon as possible?

---

[Support]

Hi, looks like you’re using layouts-left-sidebar-big-icons.html, right? That logo is a little too big, but you can try the following css:

(css/custom.css)

@media (min-width: 991px) {
	html.sidebar-left-big-icons .header {
		height: 215px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	html.sidebar-left-big-icons .page-header {
		top: 215px;
	}
	
	html.sidebar-left-big-icons .inner-wrapper {
		padding-top: 215px;
	}
	
	html.sidebar-left-big-icons .header .logo img {
		width: 271px;
		height: 177px;
		margin-left: 0;
		margin-top: -10px;
	}
}

Kind Regards.

---

[vasuboy]

Thank you. One quick question, how can i center another image between the logo and the user drop-down in the header section ?

Let me know if you have any questions.

Thank you.

---

[vasuboy]

Hi,
There is still issue with the logo.
On smaller screens (iPhone) the user drop-down is getting lost.
Here is a screenshot:
https://drive.google.com/file/d/1Duv9dTN8uFlM2IKBjxK7ro-G85Wm9p85/view?usp=sharing

Please help me fix this on all sizes.

Thank you.

---

[Support]

Hello, for small resolutions you will have to keep the logo with small size.

Add this:

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

---

[Author]

Posts