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:
after:
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
Post a Comment