2016-07-13 10 views
0

Ich verwende Foundation 5 als meine Front-End-Framework und habe ein Problem mit dem responsiven Dropdown-Menü auf klicken nicht bei 100% Bildschirmbreite bleiben.Sizing Problem auf responsive Nav Foundation 5

Wenn nicht die navbar geklickt scheint wie folgt aus:

enter image description here

auf Knopf klicken das Menü sieht wie folgt aus:

enter image description here

Es kommt von den Seiten und oben auf dem Bildschirm um etwa 30 Pixel auf jeder Seite der angeklickten Menü-Box.

mein nav bar Code sieht wie folgt aus:

<!-- Start - TopBar --> 
<% if user_signed_in? %> 
    <div class="fixed"> 
    <nav class="top-bar" data-topbar role="navigation"> 
     <ul class="title-area"> 
     <li class="name"> 

     </li> 
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> 
     <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> 
     </ul> 

     <section class="top-bar-section"> 
     <!-- Right Nav Section --> 
     <ul class="right"> 
      <li class="has-dropdown"> 
      <a href="#">Admin Functions</a> 
      <ul class="dropdown"> 
       <li><%= link_to "My Profile", current_user %></li> 
       <li><%= link_to "Edit Profile", edit_user_registration_path(@user) %></li> 
      </ul> 
      </li> 
      <li class="has-dropdown"> 
      <a href="#"><%= current_user.f_name %> <%= current_user.l_name %></a> 
      <ul class="dropdown"> 
       <li><%= link_to "My Profile", current_user %></li> 
       <li><%= link_to "Edit Profile", edit_user_registration_path(@user) %></li> 
      </ul> 
      </li> 
      <li><%= link_to('Logout', destroy_user_session_path, :method => :delete) %></li> 
     </ul> 

     <!-- Left Nav Section --> 
     <ul class="left"> 
      <li><%= link_to "Dashboard", culverts_path %></li> 
     </ul> 
     </section> 
    </nav> 
    </div> 
    <% end %> 
<!-- End - TopBar --> 

Ich bin nicht sicher, wie dies zu korrigieren, ich habe auf der Grundlage Foren gefragt, ohne Erfolg.

Bitte fragen Sie nach, wenn Sie weitere Informationen benötigen.

Danke.

+0

Haben Sie über inspect-Element überprüft, wenn Sie auf 'navbar' klicken – uzaif

+0

ja es sind keine Fehler aufgetreten –

+0

nein beim Klicken auf navbar warum die Breite von navbar reduzieren? – uzaif

Antwort

0

Das Problem war die Schienen erzeugt scaffold.scss Ich habe vergessen, es aus der Generation auszuschließen und es war mit meinem Code widersprüchlich.

Das Problem wurde behoben.