CODEWITHSUNDEEP
htmlcssweb
ejscribner
ejscribner

Reputation: 365

<a> not displaying in block format

I have a navbar with three <a> tags that form the buttons to link to different pages. I am currently working on mobilization for the site, and for some reason I cant make the dropdown display the buttons in block format.

My code: 

 <span class="nav navbar-nav inline">
      <a href="#page-top" class="navbuttons"></a>
      <a href="contact" class="navbuttons">Contact</a>
      <a href="aboutus" class="navbuttons">About Us</a>
      <a href="projects" class="navbuttons">Projects</a>
 </span>

 .navbuttons {
      font-size: 24px;
  display: inline-block;
  float: right;
  clear: left;
  margin-right: 24px;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 10px;
  color: white;
  font-weight: 700;
 }

 @media (max-width: 768px) {
      a.navbuttons {
           display: block;
      }
 }

And Here's a Screenshot

Upvotes: 0

Views: 42

Answers (1)

T J
T J

Reputation: 43156

You need to remove the float as well to get the expected behaviour of block element (Assuming you need them to stack vertically in mobile devices)

@media (max-width: 768px) {
  a.navbuttons {
       display: block;
       float:none;
  }
}

Demo

Upvotes: 1

Related Questions