Fixed Header and Menu

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 6 years ago by HTHG.
• This reply was modified 6 years ago by Yui. Reason: please use CODE button for proper formatting