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.
Site navigation bar when zoomed in falls into site text.
6 replies · opened Jul 10, 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.
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?
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.
Where should I place this?
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.
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