Fixed Header and Menu

Please remove the login requirement to see your page.

Hello,
I would suggest that you use some CSS tricks to achieve the right behavior of your elements.
The first approach that we would recommend you to try is to set a fixed width of your header and menu elements in percentages. You did not provide a link to your website so we cannot tell it for sure, but in most of the cases it the code will be something similar to:

.header { 
width: 80%;
}
.menu {
width: 20%
}

Where .header and .menu are the CSS elements of your website.
Have in mind that these properties can be named differently and to make sure that you are using the proper element declaration – right-click on the element, click inspect and check its class name.
In this case, no matter what device opens your website, the header will always take 80% of the size and the menu will take the rest 20% of it.

The second way of achieving your goal is to use media queries.
If you are not familiar with them, we recommend to check this documentation -https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Yet, the code that you should add to your custom CSS will look like:

@ media only screen and (max-width: 600px) {
 .header {
  width: 80%;
  }

In this case, the elements inside your header class will take 80% of its width ONLY when the screen hits 600px or when it is smaller.
With this approach, you can achieve very convenient and user-friendly behavior with any device that opens your website, with just a few media queries.

• This reply was modified 4 years, 7 months ago by HTHG.
• This reply was modified 4 years, 7 months ago by Yui. Reason: please use CODE button for proper formatting

Thank you for your replies.

I cannot remove the log-in. It’s a client website.

I have not yet tried the CSS fixes. I want to do my best to make sure I have identified the correct elements. (Thanks very much for descriving what I need to do. I am not quite a complete newbie, but pretty close.)

I think what I need to modify are:

.site-header

and

.main-header-menu

In one place, the consols shows #masthead.site-header

Does #masthead need to be included?

How will this affect mobile?

If I can’t inspect your site, I really cannot help.

Thanks, but I really can’t remove password protection on this site. I will attempt to resolve this on my own.