html - Adding an image to header adds overlaying text -


i added single drop down menu basic css. header looked perfect prior adding code, once add alignment thrown off completely.

before:

enter image description here

after:

enter image description here

here's before code (without drop down menu) written slim ruby on rails:

  #header     .wrapper       .login_sec         .col           href=""              =image_tag "login_icon1.png"             span                'welcome,                = logged_in_user.username             =image_tag "profile_link_img.png", class: 'img'         .col.col2           href="/conversations"             =image_tag "login_icon2.png"             span messages             / =image_tag "login_icon4.png", class: 'img4'             span class="messbg_icon" =unread_messages(current_user)             / =unread_messages(current_user)         .col.col3           href="/logout"              =image_tag "login_icon3.png", class: 'img3'             span logout 

here's after drop down menu:

  #header     .wrapper       .login_sec         .col             span              nav.menu               i.guy               href=""                  =image_tag "login_icon1.png"               | welcome, admin!               i.down               ul.menu_items                 li                   href=""  action 1                 li                   href=""  action 2                 li                   href=""  action 3                 li                   href=""  action 4                 li                   href=""  action 5         .col.col2           href="/conversations"             =image_tag "login_icon2.png"             span messages             / =image_tag "login_icon4.png", class: 'img4'             span class="messbg_icon" =unread_messages(current_user)             / =unread_messages(current_user)         .col.col3           href="/logout"              =image_tag "login_icon3.png", class: 'img3'             span logout 

the original html code single drop down menu:

<nav class="menu">     <i class="guy"></i>welcome admin!<i class="down"></i>     <ul class="menu_items">         <li><a href="">action 1</a></li>         <li><a href="">action 2</a></li>         <li><a href="">action 3</a></li>         <li><a href="">action 4</a></li>         <li><a href="">action 5</a></li>     </ul> </nav> 

single drop down menu css:

.menu {     position: absolute; }  .menu .menu_items {     position: absolute;     display: none; }  .menu:hover .menu_items {     display: block; }   .menu {     color: grey;     background-color: #eee; }  .menu .menu_items {     padding: 0.5em;     margin: 0;             background-color: white;     border: 1px solid #ccc;     border-radius: 7px;     list-style: none;     box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.5); }  .menu .menu_items {     text-decoration: none;     color: grey; } .menu .menu_items a:hover {     color: black; }  .content {     background-color: skyblue; }  {     font-style: normal;     color: black;     font: 'wingdings'; }  i.down:before {   content: '\25be'; } 


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -