Off-canvas toggle position change at smaller screen widths.

synapsis

I have an issue with the off-canvas toggle moving around as @media sizes change, and I want it to be as static as possible. This is most noticeable when @media gets below 481px, because it drops down to a second "row" and the logo moves to the center above it. This is working as designed, and visible in the Mood demo, but doesn't work for my design changes.

I'd rather the logo stay on the same row as the logo regardless of screen width, with the logo at the left AND the off-canvas toggle to the right (rather than dropping down to a new second row).

Please let me know the best way to do this, so I don't break anything. 🙂 Much appreciated!

saguaros

Hi synapsis

As I can see the logo is on the same row with menu, could you share screenshot of how it should be?

synapsis

Also, sorry if I should make this a separate thread, but the small logo doesn't seem to be loading. (Probably my fault.) I'd like to use the logo_small_75px.png image in /images/site-images, and have that gray header shrink to 75px tall also. Much appreciated if you can aid me with this. I'll try not to mess with it further, so we're not logged in at the same time working on the same files. 🙂

synapsis

I hope the following screenshots will make what I am attempting more clear:

saguaros

synapsis I added this custom CSS into your site so it can display in the same row:

/*Header on mobile*/

@media (max-width: 481px){
	.t3-header .logo {
		width: auto !important;
		border-bottom: none !important;
	}
}

Kindly check.

synapsis

You've kept the off-canvas toggle on the main row, and removed the border from the second row, making it look like a single row, but the header bar still displays the full-size logo and stays quite large.

As the screen gets to phone size, I want the header bar to shrink vertically also to 75px and display the smaller logo (images/site-images/logo_small_75px.png). I fixed the image change. But still can't get the header height to shrink to 75px tall.

You're halfway there. Can you help me with the rest? As always, I greatly appreciate your insight.

synapsis

Nevermind. I figured it out, based on what you started to do. Thanks for the hint. Got the rest sorted out. Thanks!

synapsis

Please mark this issue as closed. 🙂

saguaros

synapsis Glad to hear that you sorted it out!