Hi readers here we are back with another article regarding HTML and CSS. Hope all are doing well and safe . Explore our blog for all latest posts and please support us.
A navigation bar is the widget in which there are name of the categories which act as links. Just a simple navigation bar is not preferable so we created a navbar with different CSS effects.
For a website a responsive navigation is very important which enables users visiting your website to navigate through all the articles based on some categories. It makes the website user-friendly and ready to the approval for Adsense.
You might like these:
Here I have explained how we coded it . For any doubts and clear clarification watch the below video.
This navigation is a side navigation bar which contains the names of the categories of navigation . It also contains icons corresponding to the name.
All the name anchor tag members are included within the "menu" class and the background of the menu tag is set to yellow and width to 130 px. You can change it based on your requirement.
In this side navigation the links are specified using the anchor tag. CSS is added to it to make it more user friendly the background color is set to black with Padding set to 10px.
For the icons a stylesheet must be linked with link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css.
I included the icons such as home , search, refresh and address book using "fa fa-iconname".You can include whatever icon you need based on the name of the link.
For the "fa" class background color is set to black with left and right padding set to 50px and top padding set to 10px.
This is where we add the main attraction to the navigation by adding the hovering effect. On hovering the the fa class the background color will change to 50px and the background color to grey.
If u want to make the navigation bar sticky just add "position : sticky; top: 0px" to the CSS of the menu tag,
HTML Code:
CSS Code:
In the above code replace '#' with the link you want to navigate and you can also change the icons according to your requirements.
Post a Comment