1

When my navigation bar is displayed on a small screen (mobile example), it doesn't appear as expected, I cannot fix the problem

I tried to change my css several times but it gets worse

Can u help me please :)

navbar responsive test

@media( max-width: 1200px){
    header{
        /*margin: 20px;*/
        
    }
}
@media( max-width: 768px){
    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;      
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }
    .menu-toggle:before{
        content: '\f0c9';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    .menu-toggle.active:before{
        content: '\f00d';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    nav {
        display: none;
    }
    nav.active {
        display: block;
        width: 100%;
    }
    nav.active ul {
        display: block;
        
    }
    nav.active ul li a {
        margin: 0;
        
    }
}
nircraft
  • 8,242
  • 5
  • 30
  • 46
Fradé
  • 195
  • 1
  • 2
  • 9

4 Answers4

0

The elements in your <header> element a floated and so the menu doesn't know where the element stops and this causes CSS to not know how to compute the height of that element

A quick fix to that would be to put overflow: hidden:

<header style="overflow: auto"> ... </header>

You can learn a lot about this from this elaborated StackOverflow answer link to answer

VladNeacsu
  • 1,268
  • 16
  • 33
0

i have add overflow: auto on my header it s works but i can t fixe the menu panel too when i click on the button menu toggle , the text go right and i can t see him. i think i have a problem with my "float: right" in the class .menu-toggle ; the text isn't show in the mobile display, he go to the right and he dont take the good place... i want to place the menu panel one below the other

  • home
  • about
  • services

navbar responsive with overflow : auto

@media( max-width: 1200px){
    header{
        /*margin: 20px;*/
      overflow: auto;
        
    }
}
@media( max-width: 768px){
    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;     
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }
    .menu-toggle:before{
        content: '\f0c9';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    .menu-toggle.active:before{
        content: '\f00d';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    nav {
        display: none;
    }
    nav.active {
        display: block;
        width: 100%;
    }
    nav.active ul {
        display: block;
        
    }
    nav.active ul li a {
        margin: 0;
        
    }
}
Fradé
  • 195
  • 1
  • 2
  • 9
-1

You just need to set a bigger width for your container.

To fix your issue:

@media( max-width: 768px){
    .menu-toggle{
        width: 400px;
    }
}
Andy Clarke
  • 169
  • 5
-1

Hi Can you please follow Below Html Structure :

<header>
    <a href="#" class="logo">Logo</a>
    <div class="menu-toggle"></div>
      <nav>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div class="clearfix"></div>   

  </header>
Kuldeep Prajapati
  • 34
  • 3