Create Navigation Bar Using CSS | Oneplus Website NavBar Design

Categories: CSS TutorialHTML TutorialWeb DesignsWeb Technology

Create Navigation Bar Using CSS | Oneplus Website NavBar Design

Contents hide

2 More HTML and CSS Designs With Code and Tutorials

Learn how to create beautiful navigation bar using CSS only, In this article you will get code of the navigation bar with the video tutorial of it. This design is very easy to create it can be created by any buddy who has knowledge of basic HTML and CSS. All the hovers effects on this navigation bar are created by using CSS only so there is no need to use JavaScript for this particular design.

Video Tutorial

Navigation Bar Code

<!DOCTYPE html>
<html>
<head>
 <title>Navigation Bar</title>

<link rel="icon" href="file:///F:/Work%20task/Stras/oneplus.png">

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<style type="text/css">
 *{
  margin: 0px;
  padding: 0px;
 }

 body{
  background-color: black;
  font-family: "yu gothic";
  font-weight: normal;
 }

 nav{
  background-color: #fff;
  position: fixed;
  width: 100%;
  
 }

 ul{
  text-align: center;
 }

 nav  ul  li{
  display: inline-block;
  padding: 15px;
  color: #828282;
  width: 130px;
  font-size: 15px;
  border-bottom: 3px solid transparent;
  transition: .2s ease;
 }

 nav ul li:hover{
  color: #eb0028;
  border-bottom: 3px #eb0028 solid;
  cursor: pointer;
 }

 .new{
  color: #eb0028;
 }

    img{
     width: 40px;
     height: auto;
     position: relative;
     top: 10px;
     margin-right: 100px;
    }

     nav ul li .fa-caret-down{
     transition:transform .2s ease-in-out;
    }

    nav ul li:hover .fa-caret-down{
     transform: rotate(180deg);
    }



    .image{
     background: url("file:///D:/workspace/Images%20of%20Company/Oneplus%206T%20main%20image.jpg");
     height: 1000px;
     background-attachment: fixed;
     background-size: cover;


    }

    nav ul li ul{
     background-color: #fff;
     border-top: 1px solid #d9d9d9;
     width: 100%;
     position: absolute;
     left: 0px;
     margin-top: 18px;
     display: none;
    }

    nav ul li:hover ul{
     display: block;
    }
    nav ul li ul li{
 display: inline-block;
  padding: 15px;
  color: #101920;
  width: 130px;
  margin: 20px;
  font-size: 25px;
  border-bottom: none;
  transition: .2s ease;
    }

    nav ul li ul li:hover{
      display: inline-block;
  padding: 15px;
  color: #eb0028;
     
  font-size: 25px;
  border-bottom: none;
    }

    p{
     color: #101920;
     font-size: 15px;
    }

    nav ul li ul li:hover p{
     color: #eb0028;
    }
    
  
</style>

</head>
<body>

    <!--Creating Navbar -->

     <nav>
      <ul>
       <img src="file:///F:/Work%20task/Stras/oneplus.png">
<li>OnePlus 6T<sup class="new"> new</sup></li>
<li>Accessories  <i class="fa fa-caret-down" aria-hidden="true"></i>

<ul>
<li><i class="fas fa-headset"></i>
<br/>
 <p>Head Phone</p>
</li>
<li><i class="fas fa-suitcase"></i>
<br/>
<p>Mobile Case</p>
</li>
<li><i class="fas fa-plug"></i>
<br/>
<p>Power</p>
</li>
<li><i class="fas fa-file"></i>
<br/>
<p>Protection</p>
</li>
</ul>
</li>
<li>Support</li>
<li>Brand</li>
<li>Community</li>
<li>Experince & Retail</li>
</ul>
</nav>
<!--background image -->

     <div class="image">
      
     </div>
</body>
</html>

More HTML and CSS Designs With Code and Tutorials

reecry

Next Create Profile Cards Using HTML and CSS | Download Source Code »

Previous « Create Smooth Scrolling Effect Using CSS and HTML Only

View Comments

Admission Abroad says:

November 13, 2019 at 12:38 pm

Great information,Thanks for sharing .
overseas education consultants |overseas education |best study abroad consultants |study abroad without ielts |abroad education
Admission Abroad says:

November 13, 2019 at 12:38 pm

Thanks for sharing Great information .
study abroad |study abroad consultants |overseas education consultants |overseas education |study overseas consultants
Eric Jones says:

April 14, 2020 at 2:30 pm

Hi, my name is Eric and I’m betting you’d like your website studyreadeducate.com to generate more leads.

Here’s how:
Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It signals you as soon as they say they’re interested – so that you can talk to that lead while they’re still there at studyreadeducate.com.

Talk With Web Visitor – CLICK HERE http://www.talkwithwebvisitor.com for a live demo now.

And now that you’ve got their phone number, our new SMS Text With Lead feature enables you to start a text (SMS) conversation – answer questions, provide more info, and close a deal that way.

If they don’t take you up on your offer then, just follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

CLICK HERE http://www.talkwithwebvisitor.com to discover what Talk With Web Visitor can do for your business.

The difference between contacting someone within 5 minutes versus a half-hour means you could be converting up to 100X more leads today!

Try Talk With Web Visitor and get more leads now.

Eric
PS: The studies show 7 out of 10 visitors don’t hang around – you can’t afford to lose them!
Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now… don’t keep them waiting.
CLICK HERE http://www.talkwithwebvisitor.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://talkwithwebvisitor.com/unsubscribe.aspx?d=studyreadeducate.com
Eric Jones says:

April 17, 2020 at 7:21 pm

Cool website!

My name’s Eric, and I just found your site - studyreadeducate.com - while surfing the net. You showed up at the top of the search results, so I checked you out. Looks like what you’re doing is pretty cool.

But if you don’t mind me asking – after someone like me stumbles across studyreadeducate.com, what usually happens?

Is your site generating leads for your business?

I’m guessing some, but I also bet you’d like more… studies show that 7 out 10 who land on a site wind up leaving without a trace.

Not good.

Here’s a thought – what if there was an easy way for every visitor to “raise their hand” to get a phone call from you INSTANTLY… the second they hit your site and said, “call me now.”

You can –

Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It lets you know IMMEDIATELY – so that you can talk to that lead while they’re literally looking over your site.

CLICK HERE http://www.talkwithwebvisitor.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

Time is money when it comes to connecting with leads – the difference between contacting someone within 5 minutes versus 30 minutes later can be huge – like 100 times better!

That’s why we built out our new SMS Text With Lead feature… because once you’ve captured the visitor’s phone number, you can automatically start a text message (SMS) conversation.

Think about the possibilities – even if you don’t close a deal then and there, you can follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

Wouldn’t that be cool?

CLICK HERE http://www.talkwithwebvisitor.com to discover what Talk With Web Visitor can do for your business.

You could be converting up to 100X more leads today!
Eric

PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now… don’t keep them waiting.
CLICK HERE http://www.talkwithwebvisitor.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://talkwithwebvisitor.com/unsubscribe.aspx?d=studyreadeducate.com
Eric Jones says:

April 18, 2020 at 6:14 am

Hey, my name’s Eric and for just a second, imagine this…

- Someone does a search and winds up at studyreadeducate.com.

- They hang out for a minute to check it out. “I’m interested… but… maybe…”

- And then they hit the back button and check out the other search results instead.

- Bottom line – you got an eyeball, but nothing else to show for it.

- There they go.

This isn’t really your fault – it happens a LOT – studies show 7 out of 10 visitors to any site disappear without leaving a trace.

But you CAN fix that.

Talk With Web Visitor is a software widget that’s works on your site, ready to capture any visitor’s Name, Email address and Phone Number. It lets you know right then and there – enabling you to call that lead while they’re literally looking over your site.

CLICK HERE http://www.talkwithwebvisitor.com to try out a Live Demo with Talk With Web Visitor now to see exactly how it works.

Time is money when it comes to connecting with leads – the difference between contacting someone within 5 minutes versus 30 minutes later can be huge – like 100 times better!

Plus, now that you have their phone number, with our new SMS Text With Lead feature you can automatically start a text (SMS) conversation… so even if you don’t close a deal then, you can follow up with text messages for new offers, content links, even just “how you doing?” notes to build a relationship.

Strong stuff.

CLICK HERE http://www.talkwithwebvisitor.com to discover what Talk With Web Visitor can do for your business.

You could be converting up to 100X more leads today!

Eric
PS: Talk With Web Visitor offers a FREE 14 days trial – and it even includes International Long Distance Calling.
You have customers waiting to talk with you right now… don’t keep them waiting.
CLICK HERE http://www.talkwithwebvisitor.com to try Talk With Web Visitor now.

If you'd like to unsubscribe click here http://talkwithwebvisitor.com/unsubscribe.aspx?d=studyreadeducate.com
Kara says:

May 21, 2020 at 10:59 am

What's up to all, it's truly a pleasant for me to pay a quick visit
this web site, it consists of helpful Information.

Rajeev says:

May 21, 2020 at 12:36 pm

thanks

Becky says:

May 21, 2020 at 11:29 am

Awesome blog! Do you have any hints for aspiring writers?
I'm hoping to start my own blog soon but I'm a little lost on everything.

Would you recommend starting with a free platform like Wordpress or go for a paid option? There are so many
options out there that I'm totally overwhelmed ..
Any recommendations? Cheers!

Rajeev says:

May 21, 2020 at 12:35 pm

Go with Blogger if you just started through Blogger you will learn lot about content writing and other stuff, In future you can upgrade to Wordpress if required

Reda says:

May 23, 2020 at 4:44 am

Hi Dear, are you really visiting this site on a regular basis, if so afterward you will definitely take fastidious
experience.

Rajeev says:

May 23, 2020 at 1:46 pm

Thanks

Muriel says:

May 26, 2020 at 7:16 pm

Hey very interesting blog!
Ernestine says:

January 12, 2021 at 2:24 am

I love it when folks come together and share ideas.
Great blog, stick with it!