在移动设备上调整顶部导航栏的大小时出现问题

Question

I built this very simple site for work and I found an issue related to the top navigation bar when resizing on mobile (please note there is no mobile version of the site, nor will be).

When resizing on mobile screens, the navigation bar remains fixed, while the content can be moved. This means that, while the navigation bar stays stuck at the top left corner and partially blocks the screen, the text moves freely under it. Please refer to the screenshots below:

Mobile: Example 1

If you check the source code, the top navigation bar is set to fixed. If I remove this line, resizing on mobile works fine, but the top margin specified for the content (so that it doesn't overlap with the navigation bar) becomes huge.

Changing this margin, however, affects the navigation bar when resizing the window on a computer, as you can see below:

Desktop: Example 1

It's been many years since I last worked with html and css, so please excuse me if I'm missing the obvious.

How can I find a solution to this?

Answer 1

This is happening because you given width and max-width 100% to your top class, If you want to fix this in mobile devices you need to write media query

---

Try below code to your css

---

@media (max-width: 500px){ 
div.top{
    width: auto;
    max-width: none;
}}

Answer 2

if you want to show navigation in mobile view then use below code.

---

@media (max-width: 500px){ 
div.top{
    position: relative;
}
div.normal{
    margin-top:200px;
}
ul.menu li{
    float: none;
}}