0

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?

flyx
  • 35,506
  • 7
  • 89
  • 126
Claire
  • 3
  • 3

2 Answers2

0

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;
}}
Vishal Panara
  • 746
  • 4
  • 19
  • Whoops. Actually, the max-width wasn't there initially, it was just my first (and unsuccessful) try to fix it. Forgot to remove it afterwards. – Claire Jul 07 '16 at 10:13
  • Not working, I see the same than in Mobile example 1. – Claire Jul 07 '16 at 10:20
0

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;
}}
Vishal Panara
  • 746
  • 4
  • 19