Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions
Free to watch • No registration required • HD streaming
19 Awesome Tools and Shortcuts to Add to Your Mac's Menu Bar Right Now
If you have a Mac, chances are you’re already familiar with features like widgets, keyboard shortcuts, and even the MacBook Pro Touch Bar if you have it. But, Apple’s been constantly evolving the Mac’s software and hardware to bring out the most utility for every user. From small things like the new notification center to […] https://www.idropnews.com/news/19-awesome-tools-and-shortcuts-to-add-to-your-macs-menu-bar-right-now/150049/
Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
✓ Live Streaming✓ Interactive Chat✓ Private Shows✓ HD Quality✓ Free Actions
Free to watch • No registration required • HD streaming
Hello guys, today I am going to show you how to make a cool responsive navigation menu bar which will work on all devices. Suppose, we want to create a navigation menu bar for a website/blog and want it to work perfectly for all kinds of devices.
First of all, let me show you how this menu will look on different devices.
ON LAPTOP / DESKTOP
ON MOBILE
Hope you would have liked the look of this navigation menu bar. Yes?
Ok great, let’s start by writing an HTML code for all the items we need for the Menu Bar.
Now, copy and paste the above HTML code between <body>...</body> tag (Preferably just after <body>).
CSS
After writing HTML code for our navigation menu bar, Now it’s time to style them. So now we are styling them in a dark color. You can change the background colors and text colors as per your preference.
And also we are adding media query to change how it might look for different screen sizes i.e Responsive. Here we are adding two media query breakpoints as (max-width:1024px) and (max-width: 768px).
Now copy and paste the code shown below, inside the <style>...</style> tag.
header nav
{
float:right;
}
header nav ul
{
margin:0;
padding:0;
display:block;
}
header nav ul li
{
list-style:none;
display:inline;
position:relative;
}
header nav ul li a
{
font-size:14px;
font-weight:normal;
height:50px;
line-height:50px;
padding:0 20px;
color:#fff;
text-decoration:none;
display:inline-block;
}
header nav ul li.active
{
background-color:#2196f3;
display:inline-block;
}
header nav ul li ul
{
position:absolute;
left:0;
top:50px;
background:#003e6f;
display:none;
}
header nav ul li.active ul
{
display:block;
}
header nav ul li ul li
{
display:block;
width:200px;
border-bottom:1px solid rgba(0,0,0,.2);}
header nav ul li ul li a
{
display:block;
padding:0 20px;
}
header nav ul li a:hover,header nav ul li a:active
{
background:#2196f3;
color:#fff;
}
.menu-toggle
{
color:#fff;
float:right;
line-height:50px;
font-size:24px;
cursor:pointer;
display:none;
width: auto;
height: 50px;
padding:0 15px;
box-sizing:border-box;
background:#000;
}
@media screen and (max-width:1024px){
header{padding:0 30px;}
header nav ul li a{padding:0 10px;}
@media screen and (max-width:768px){
.headerads{display:none;}
header{position:absolute;padding:0 5%;}
.menu-toggle{display:block;height:50px;}
header nav{position:absolute;width:100%;min-height:100vh;height:120vh;min-height:550px;background:#333;top:50px;left:-100%;transition:.5s;}
header nav.active{left:0;top:50px;}
header nav ul{width:100%;display:block;text-align:center;}
header nav ul li{width:100%;display:block;border-bottom:1px solid rgba(0,0,0,.2);}
header nav ul li a{display:block;}
header nav ul li.active ul{position:relative;background:#003e6f;top:0;}
header nav ul li ul li{width:100%;text-align:center;}
And to show the Font Awesome icons, we have to add font awesome library CSS file into the head section. Copy and paste the code which is shown below in <head>...</head> section.
Save the document and THAT’S IT!! Voila!! Now your navigation menu bar is ready and responsive.
VIEW DEMO
If you still facing any problem with the code or still have doubts about how and where to put the codes, feel free to ask in the comment section below. I will reply to your question as soon as possible. And if you liked this, then don’t forget to like, comment & share. Thank you.
