Responsive header help

[wanderlust]

Hello team,

Everything is going great so far, and I just have a couple questions about the header.

1) My mobile break-point is 880px. When it reaches this point, I would like to have my logo
centered, above my menu, with a custom width. Right now it’s out of tune

2) The green magnifying glass that I use as my search bar goes away around 980px and is
replaced with the word search, How would I stop that from happening until my mobile
breakpoint?

3) And for some reason, when minimizing the screen, my logo goes out of view (to the left).
Any way to keep this looking normal and in plain sight when minimizing the screen?

Thank you for all of your help team.

[christopher]

Hi there,

1. Please add the CSS code below to X > Launch > Options > CSS:

@media (max-width: 880px) {
	a.x-brand.img {
		float: none;
		text-align: center;
		margin: auto;
		width: 250px;
	}
	a.x-brand.img {
		margin: 10px 0 0 0;	
		position: static;
	}
}

The other points needs much more checking and custom development as the original mobile view threshold of the theme is 991px. So if you bring it back to that it will fix the issues.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[wanderlust]

Okay using that code and tweaking some of my older css, I got it to how i like it. Can you take a look at why my search bar disappears around 980px? Or should i start a new thread about that?

[friech]

Hi There,

Please turn off the NAVBAR SEARCH on Theme Options > Header. Then follow this guide on how you can add a search item on your UberMenu.

Hope it helps,
Cheers!

[wanderlust]

Thankyou for your help!

[ruenel]

You are most welcome!