html - float right is not working in my case , what should i do? -
hi , show in picture , if use float right , phone image after hamburger icon.
what should position phone icon before hamburger icon except using margin way ?
<div class="top_nav" style="position:fixed; width=100%;"> <div class="top_nav_menu top_nav_left_log_part"> <a href="index.html" style="padding:auto;"> <img id="img_nav_left_png" src="img/fujitsu.svg" alt="" style="height:80px; width=83px;padding-top:17px;padding-bottom:23px;"> </a> </div> <div id="top_nav_menu_middle_id" class="top_nav_menu top_nav_menu_middle"> <ul class="top_nav_ul"> <li class="top_nav_li nav_menu"><a href="services.html" data-toggle="tooltip" data-placement="left" title="database migration , consulting services">services</a></li> <li class="top_nav_li nav_menu"><a href="support.html" data-toggle="tooltip" data-placement="left" title="24/7 , business hours support options postgresql users">support</a></li> <li class="top_nav_li nav_menu"><a href="training.html" data-toggle="tooltip" data-placement="left" title="training courses dbas , developers">training</a></li> <li class="top_nav_li nav_menu"><a href="product.html" data-toggle="tooltip" data-placement="left" title="fujitsu enterprise postgres , postgresql">product</a></li> <li class="top_nav_li nav_menu"><a href="solutions.html" data-toggle="tooltip" data-placement="left" title="end-to-end postgresql solutions">solutions</a></li> <li class="top_nav_li nav_menu"><a href="contact.html" data-toggle="tooltip" data-placement="left" title="tooltip on left">contact</a></li> </ul> </div> <div class="top_nav_menu top_nav_contact_part"> <ul class="top_nav_ul"> <li id = "top_nav_phone_log_li" class="top_nav_li" > <a href="tel://+6194549191" style="padding-top:25px;"> <img id="img_nav_phone_png" src="img/phone_icon.svg" alt="" style="height:100%; margin-left:20px; width:26px;height:30px;"> </a> </li> <li id = "top_nav_phone_number_li" class="top_nav_li "><a href="tel://+6194549191" class="number">+61 2 9454 9191</a></li> </ul> </div> <div class="top_nav_menu top_nav_right_log_part"> <ul class="top_nav_ul"> <li class="top_nav_li top_nav_right_log"> <img id="img_nav_right_png" src="img/postgresql.svg" alt="contact-number" style="height:40px;width:175px;"> </li> <li class="hamberger_icon"> <a href="javascript:void(0);" onclick="myfunction()" id="hamberger">☰</a> </li> </ul> </div> </div> thanks
css code
.top_nav { margin: 0px 0px 0px 0px; height: 80px; width: 100%; position: fixed; top: 0px; background-color: #ffffff; z-index: 1; border-bottom-style: solid; border-bottom-width: 4px; border-bottom-color: #f7f9f8; } .top_nav_menu { margin: 0px 0px 0px 0px; /* border-style: solid;*/ border-color: red; float: left; height: 80px; vertical-align: top; } .top_nav_left_log_part { margin-left: 30px; margin-right: 20px; } .top_nav_right_log_part { float: right; } ul.top_nav_ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; /* background-color: #333;*/ } li.top_nav_li { float: left; height: 80px; /* border-style: solid;*/ } li.top_nav_li { display: inline-block; /* color: white;*/ text-align: center; padding-top: 25px; /* padding-left: 16px;*/ /* padding: 10px 16px;*/ text-decoration: none; transition: 0.3s; } li.nav_menu:hover:not(.active) { background-color: #eeeeee; } li.nav_menu_active { border-bottom-color: #ff0000; border-bottom-style: solid; border-bottom-width: 4px; } li.top_nav_li a:hover:active { /* background-color: red;;*/ } li.nav_menu { font-size: 20px; color: #322f31; margin-left: 20px; margin-right: 20px; } li#nav_menu_show { display: none; } li#nav_menu_show a:hover:not(.active) { background-color: red; } img#img_nav_left_png, img#img_nav_right_png, img#img_nav_phone_png { display: block; /* width: 25px; */ margin: auto; } li.top_nav_right_log { float: right; margin-right: 10px; padding-top: 20px; display: none; } ul.top_nav_ul li.icon { display: none; } /*hamberger size*/ #hamberger { font-size: 30px; margin: 0; } .icon { margin-top: 15px; } .number { margin-left: 10px; } li.hamberger_icon { float: right; margin-right: 10px; padding-top: 17px; display: none; } @media screen , (max-width:1170px) { /* .top_nav_contact_part{ display:none; }*/ li.nav_menu { font-size: 20px; color: #322f31; margin-left: 10px; margin-right: 10px; } .top_nav_left_log_part { margin-left: 20px; margin-right: 10px; } .top_nav_right_log { margin-right: 0px; } id#img_nav_phone_png { margin-left: 100px; } } @media screen , (max-width:1160px) { .top_nav_menu_middle { width: 100%; display: none; position: fixed; top: 80px; } li.nav_menu { background-color: grey; float: none; } li.top_nav_right_log { display: none; } li.hamberger_icon { font-size: 30px; display: block; float: right; margin-right: 10px; } } @media screen , (min-width:1165px) { li.top_nav_right_log { display: block; } li.nav_menu { float: left; } /* .top_nav_menu_middle{ display: block; }*/ } .top_nav_menu_middle_display { display: block; } /*navi responsive */ /* when screen less 768 pixels wide, hide list items, except first 1 ("home"). show list item contains link open , close topnav (li.icon) */ @media screen , (max-width:800px) { .top_nav_menu_middle{ display: none; } #top_nav_phone_number_li{ display:none; }/* .top_nav_contact_part{ : right; } */ ul.top_nav_ul li.top_nav_right_log{ display: none; } ul.top_nav_ul li.hamberger_icon { float: right; display: block; } }
i recommend using flexbox this.
your html this:
<div class="navigation-bar"> <div class="telephone"></div> <div class="hamburger-menu-icon"><div> </div> your css this:
.navigation-bar { display: flex; flex-direction: row; justify-content: end; } .telephone { order: -1; } justify-content: end; kind of same float: right; when tell .telephone have order: -1; tell in front of other elements (hamburger-menu-icon).
guide flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
if create codepen. let me know!
Comments
Post a Comment