CODEWITHSUNDEEP
htmlcss
Stanislav Sosiak
Stanislav Sosiak

Reputation: 11

Want my nav be responsively inline centered under logo

Got a logo: 

 <div class="logo"></div>

And some navigation:

<ul class="bar">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Skills</a></li>
       <li><a href="#">Contacts</a></li>
</ul>

I want my nav be under logo on mobile phones. I have got my logo centered but i don't know how to center my nav under logo.

Here's CSS: 

.bar {
  position: relative;
  float: right;
  right: 9%;
  top: -60px;
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Coming Soon', sans-serif;
 }

.bar li {
 display: inline-block;
 margin-left: 60px;
}

Upvotes: 1

Views: 53

Answers (2)

Zer0
Zer0

Reputation: 1690

Try to define rules for mobile phones only:

@media (max-width: 480px) {
.bar {
  //paste any mobile code here
}
                
.bar li {
  //paste any mobile code here
}
}
.bar {
  position: relative;
  float: right;
  right: 9%;
  top: -60px;
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Coming Soon', sans-serif;
}

.bar li {
  display: inline-block;
  margin-left: 60px;
}
<div class="logo"></div>
<ul class="bar">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Skills</a></li>
  <li><a href="#">Contacts</a></li>
</ul>

Upvotes: 2

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use CSS Media Queries. And apply your properties, in my case I am using screen width <= 767px.

Like:

/* On Mobiles */
@media screen and (max-width: 767px) {
  .bar {
    display: block;
    float: none;
    text-align: center;
    right: auto;
  }

  .bar li {
    display: block;
    margin: 0;
  }
}

Have a look at the snippet below:

.logo {
  float: left;
  background: #eee;
  width: 100px;
  height: 50px;
  text-align: center;
  font-size: 1.5em;
  padding-top: 20px;
  margin: 0 auto;
}

.bar {
  position: relative;
  padding: 0;
  float: right;
  right: 9%;
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Coming Soon', sans-serif;
 }

.bar li {
 display: inline-block;
 margin-left: 60px;
}

/* On Mobiles */
@media screen and (max-width: 767px) {
  .logo {
    float: none;
  }
  
  .bar {
    display: block;
    float: none;
    text-align: center;
    right: auto;
  }
  
  .bar li {
    display: block;
    margin: 0;
  }
}
<div class="logo">Logo</div>
<ul class="bar">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Skills</a></li>
   <li><a href="#">Contacts</a></li>
</ul>

Hope this helps!

Upvotes: 2

Related Questions