INTRODUCTION
PIN TO TOP MENU
Welcome to a tutorial on how to create a simple CSS floating menu. So you need to “fix” a navigation at the top of a web page, and it will follow along even if the user scrolls down? That is actually pretty easy, and let us walk through the steps on how to build one – Read on!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Step 1 | Step 2 | Step 3 |
Extra | Closing |
STEP 1
THE HTML
Let us start with the basics and the structure of the menu first – The HTML part of the navigation menu.
Floating Menu Demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce porttitor elit sem, at sodales nunc viverra at.
Nullam vehicula porttitor felis eget fermentum.
Pellentesque vitae rutrum nisi.
Suspendisse velit dui, tempus ac est sed, hendrerit ultricies orci.
Praesent tristique nec sem finibus tincidunt.
Pellentesque pulvinar dolor sed faucibus vestibulum.
Yep, this should be really straightforward. All you need is a container and put all the links within.
STEP 2
THE CSS
Next, we make the menu look good and stick to the top with some CSS.
/* [FLOATING MENU] */
#float-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #333;
}
#float-menu a {
display: inline-block;
color: #fff;
padding: 10px 15px;
text-decoration: none;
text-align: center;
}
#page-contents {
margin-top: 50px;
}
/* [DOES NOT MATTER] */
html, body {
font-family: arial, sans-serif;
}
#page-contents p {
padding: 100px 0;
background: #FFC7C7;
}Yep, that is all that you need.
- The part that pins the menu right to the top of the page is
position: fixed. topandleftwill determine where the menu is positioned.- So if you want a bottom menu, use
bottom: 0instead. - Giving
#float-menuawidth: 100%andbackground: #333literally turns it into a navigation bar. - The
#float-menu apart is basically styling the “individual tabs” of the menu. - Remember to leave some empty space on top of the contents
#page-contents { margin-top: 50px; }, or the fixed menu will “cover over it”.
STEP 3
RESPONSIVE MENU
Actually, the above steps will give you a good enough fixed menu. This step is kind of optional, and a “power up” for those who want a nice menu that will fit on both big and small screens.
THE HTML
There is not much of a difference in this “improved version”, except that we are using an additional HTML symbol as the icon here – For a complete list of HTML symbols that you can use, check out Toptal.
THE CSS
/* [FLOATING MENU] */
#float-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #333;
}
#float-menu a {
display: inline-block;
color: #fff;
padding: 10px 15px;
text-decoration: none;
text-align: center;
box-sizing: padding-box;
}
#float-menu i {
text-decoration: none;
font-style: normal;
}
#page-contents {
margin-top: 50px;
}
@media all and (max-width: 768px) {
#float-menu a {
width: 20%;
}
#float-menu i {
display: block;
font-size: 1.7em;
}
#page-contents {
margin-top: 90px;
}
}There are a couple of improvements in this version of the Floating Menu. Apart from the usually fixed menu, we now add a @media to cater to the “small screen transformation”.
- The tabs are set to a percentage so that we don’t get weird empty spaces – If you have more tabs, please adjust this space accordingly.
- We set the icon into
display: blockto “expand” the icon, so that the tab becomes more of a button and easier to tap on. - Finally, readjust the spacing on top of the contents, so that the menu doesn’t cover over it.
EXTRA
DOWNLOAD & MORE
That’s all for the code, and here is the download link as promised – Plus a small extra that may be useful to you.
RESPONSIVE MENU – HAMBURGER IT
Want more ways to create a responsive menu? Check the hamburger.
2 Steps Simple Responsive Pure CSS Hamburger Menu
SOURCE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you to create a better website, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!
The post 3 Steps Simple Css Floating Menu appeared first on Code Boxx.
