CODEWITHSUNDEEP
htmlcsssearchnavbarresponsive
harry
harry

Reputation: 129

Responsive navbar with onclick search bar

I'm trying to make a responsive navbar which sits in-line with a few other icons on my website.

I have it working on desktop mode, but I am struggling with the mobile view.

The main issue I'm having is that I cannot collapse the search bar so when you click the magnifying glass the search bar will pop up below the navbar. Lining up all 5 icons so that it looks neat.

Below I have attached 3 images:

The first one is where I am currently at with my site The second Site is What I want to achieve The Third is how it looks in desktop mode with the search bar working.

<code>first image</code> Second Image enter image description here

I have also attached a js Fiddle with all the content that I currently have.

https://jsfiddle.net/kLo8x29u/

  <div class="topnav" id="myTopnav">      

  <a class='home'href="#">Home</a>
  <a href="#">Building Materials</a>
  <a href="#">Timber and Hardwood</a>
  <a href="#">Landscaping</a>
  <a href="#">Kitchens and Bathrooms</a>
  <a href="#">Tools</a>
  <a href="#">Flooring</a>
  <a href="#">Tool Hire</a>
  <a class='timber' href="#a">Timber Enginering</a>

       <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars" style="font-size:56px"><p>Home</p></i>
  </a>
    </div>

Thanks in advance!

Upvotes: 1

Views: 659

Answers (1)

Analise Burtet
Analise Burtet

Reputation: 77

If you want to align your icons, you have to put the icons and the menu in the same div with an id; Then you give it a position relative and display inline-block. After this, all the icons have to have float left, so that they will be positioned in line. The way you have your code, youre not informing it that you want to have the icons side by side :) if you still need some help, I can help you

Upvotes: 1

Related Questions