CODEWITHSUNDEEP
javascripthtmlcss
cherlloydfan1
cherlloydfan1

Reputation: 11

Why are the nav bar links in the wrong order?

So I've programmed my nav bar but the links are in the wrong order so why is it like this? and how can I fix it? It is in the right order for the mobile version, it just the desktop version which is in the wrong order. Here is my html code:

<div class="topnav" id="myTopnav">
    <img src='images/ared logo.jpeg ' width="120" height="40">
    <a href="">Home</a>
    <a href="">About us</a>
    <div class="dropdown">
        <button class="dropbtn">Services
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Sports</a>
          <a href="#">Events</a>
          <a href="#">Social media</a>
        </div>
      </div> 
      <a href="">Medical</a>
      <a href="" >Testmonies</a>
      <a href="" >Case study</a>
      <a href="" >Blog & news</a>
    <a href="" >Contact us</a>
   
   
   

  

  

    <img src='images/login icon.png ' width="30" height="30" style="text-align: right; 
    float:right;padding-top:10px" >

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776; 
  </a>

Here is my CSS code:

.topnav {
overflow: hidden;
background-color: #fffcf6;
}

.topnav a {
float: right;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12pt;
font-family: 'Open Sans', sans-serif;
}

.active {
background-color: #ecad5d;
color: #000;
}

.topnav .icon {
display: none;
}

.dropdown {
float: right;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 12pt;
border: none;
outline: none;
color: #000;
padding: 14px 16px;
background-color: inherit;
font-family: 'Open Sans', sans-serif;
margin: 0;

}

.dropdown-content {
display: none;
position: absolute;
background-color: #fffcf6;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #ecad5d;
color: #000;
}

.dropdown-content a:hover {
background-color: #ecad5d;
color: black;
}

.dropdown:hover .dropdown-content {
display: block;
}

@media screen and (max-width: 600px) {

.topnav a:not(:first-child),
.dropdown .dropbtn {
    display: none;
}

.topnav a.icon {
    float: right;
    display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {
    position: relative;
}

.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}

.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}

.topnav.responsive .dropdown {
    float: none;
}

.topnav.responsive .dropdown-content {
    position: relative;
}

.topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
}
}

Here is a picture of what it looks like: enter image description here

Upvotes: 1

Views: 327

Answers (2)

prosach
prosach

Reputation: 312

If you use display:flex it will work. Atleast it will resolve the problem that you asked.

    .topnav {
    overflow: hidden;
    background-color: #fffcf6;
      display:flex;
    }

image of the result

Upvotes: 0

ykostov
ykostov

Reputation: 367

A solution is to float the whole div element instead of <a elements. Or in another words:

.topnav {
   float: right;
 }

and remove the float in the .topnav a

If you want your img to float on the left side, you can separate the a links with an another div element:

<div class="topnav">
  <img ...>
<div class="topnav-right>
   <a href=...>
</div>
</div>

In that way topnav-right should have the float: right;

Best Regards, ykostov

Upvotes: 4

Related Questions