Site navigation bar when zoomed in falls into site text.

6 replies · opened Jul 10, 2019

PpatriotJul 10, 2019

I am using full-header on site. When the computer screens zooms in the navigation header drops down and into body of site. I need to figure out how to correct this. www.smehjobs.com. Please advise. If you zoom in it will drop. So depending on screen size and zoom settings the site does not work.

SSemicolon WebSTAFFJul 11, 2019

Hello,

While this is unusual, can you please provide us with a Screenshot or Sreencast of the issue along with more information on Browser and OS you are using so that we can look into this issue.

Additionally, please consider correcting the issues mentioned here: https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.smehjobs.com%2F as these errors might also be the cause of the issues you are facing.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpatriotJul 11, 2019

I made the updates and changes. After playing around with it what I am seeing is if I remove one of the navigation items and then zoom in the computer screen monitor it works. It seems the navigation names are too long. I am curious if there is a way to adjust the navigation font size or a setting to allow it to work correctly. Thoughts?

SSemicolon WebSTAFFJul 12, 2019

Hello,

The Browser Zoom is something which modifies the Browser Width which runs the Responsive Styles. So for example if your Browser Window is at 1000px width and 100% Browser Zoom. When you zoom in to 200% your Browser Window Width is now 500px or if you zoom out to 50%, the Browser Window Width is now 2000px. Note that as you zoom in the width reduces. So this is something which we cannot control.

So you will need to add Media Queries with the required width taking into consider the Browser Zoom In according to your needs. Consider using this Example:

@media screen and (max-width: 1200px) {
	#primary-menu ul li > a {
		padding-left: 12px;
		padding-right: 12px;
		font-size: 12px;
		letter-spacing: 0;
	}
}

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpatriotJul 18, 2019

Where should I place this?

SSemicolon WebSTAFFJul 19, 2019

Hello,

Use this CSS Code inside the css/custom.css File. Please make sure that you check the Documentation > Start > Customization Section for more setup details.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

PpatriotJul 19, 2019

Perfect! All is resolved! Thank you

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard