Can't make NavBar Responsive?
I am working on a website and stuck at making it responsive at one particular element . Actually that is NavBar. When I give it margin-right:400px and making it centre of the web page, it is working in laptop screen whereas in smaller mobile screen its is not working and when I use the responsive properties by adding width:100 5 height:auto and margin-right:400px; it is working in small devices but not in laptop screen. On Laptop screen, it is positioned towards the right side of the screen.
Thank you in advance…
You can use any css framework like bootstrap or css mediaquery.
1: Use Flexbox
The CSS3 Flexible Box, or more widely known as Flexbox, is a new and powerful layout mode in CSS3. It provides us with a box model optimized for laying out user interfaces. With Flexbox, vertical centering, same-height columns, reordering and changing direction is a breeze.
Resource: https://flexboxfroggy.com/
2: Use CSS-Media Queries
CSS Grid is the most powerful layout system available in CSS. It brings a two-dimensional layout tool to the web, with the ability to place items in rows and columns. The importance of grids in modern web design is high so this new spec solves a lot of age-old problems with laying out elements in-browser.
Resource: https://flexboxfroggy.com/
3: Use Bootstrap
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Bootstrap is completely free to download and use! Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. … Here are some additional reasons to use Bootstrap: Bootstrap’s responsive CSS adjusts to phones, tablets, and desktops.
4: Use Foundtation
Foundation is also counted among exceptional front-end frameworks. It is an ultra responsive framework that is used to create seamless designs to create websites, applications for the web and mobile and email templates. Foundation is the easiest framework to learn and thus it can easily be used by a new user. This exceptional framework has got a number of components including layouts, navigation, media, library containers and much more. Foundation has also got an exceptional list of plugins that offers extended choice to the developers to choose one accordingly.
Tip: When making a website, try to make it mobile first. i.e first make the website responsive for mobile views and then make it for desktop. The reason behind it is that if you make it mobile first, then it also looks good on desktop. But if you design desktop first, it won’t look good on mobile.
Hope it helps
