How to make responsive navigation bar using html css || Code with Neha
So today's topic is how to make responsive navigation bar using html and css
So starting with the structure of Navigation bar
Which is mainly divided into 4 parts header, Navigation bar or menu ,content and Footer
The header element represents a container for introductory content or a set of navigational links.
A header element typically contains:
• one or more heading elements (h1 h6)
• logo or icon
• authorship information
The nav tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a nav element. The nav element is intended only for major blocks of navigation links.
The content defines the overview of the website which is usually represented by h1 and p tags
The footer tag defines a footer for a document or section.
A footer element typically contains:
• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
The div tag defines a division or a section in an HTML document.
The div tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
The div tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the div tag here I am using 1st div tag as header and 2nd div tag as nav
Within nav tag there is the list of navigation links options which is represented by li tag Within ul tag (unordered list)
Now for styling the website
Using style tag just before closed head tag
Starting with header tag
Keeping the width of header as 100%
Height as 100 px border as 2px solid white color
You can chose background color of your choice just check the html color code from the website
Repeating the same step for nav bar
Now coming to the styling of the list
Keeping the list style type as none as it removes the bullets. A navigation bar does not need list markers
The display property specifies the display behavior (the type of rendering box) of an element.
Here using the display as inline block
It Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
Now last but not the list hover
The :hover selector is used to select elements when you mouse over them.
The :hover selector can be used on all elements, not only on links.
Now to add a background image to the website
Styling the body
Setting background image , background size and background position
So the home page of the website is ready
Now to create the linking webpages you just need to copy paste the home page code and the main content of the webpage can be written within body tag just beneath div closing tag
And Don't forget to insert the link of the webpages in the div part to make the page responsive
You can create as much linking webpages you can
This website us just a prototype you can design it as per your wish
So that's it for today
Hope you all found my content useful
If it's so then don't forget to subscribe my channel Code with Neha and press the Bell Icon for Regular Updates
See you in the next video till then Stay Safe Stay Happy
#responsivenavigationmenuusinghtmlandcss
#howtomakeresponsivenavigationbarinhtmlandcss
#responsivenavigationbarwithhtmlandcss
#navigationbarinhtmlandcssresponsive
#howtocreateresponsivenavigationbarusinghtmlandcss
#responsivenavigationbarhtmlcss
#responsivenavigationbartutorial
#navbarcss
#responsivenavgationbarcss
#menubar
#navigationbar
#howtomakeresponsivemenubarusingcss
#navigationbarinhtml
#responsivenavigationbarwithhtmlandcss
#Responsivenavbarhtmlcss
#responsivenavbarinhtmlcss