I wanna try to make the nav bar of my responsive portfolio site is when I click on the menu it shows the options similar to this when i reduce the width of screen:
I am attaching the live link of my portfolio :
https://naima-shk.github.io/My-Portfolio/
Please help me to make my navbar fully responsive.
Hi @naimiii
You might like to take a look to this W3Schools How to… section o directly in this par of it:
I think it may help you with your Portfolio site.
Be aware that the best practice are using querySelector() method and classlist Element’s property or toggle() method to achieve the same thing applying styles to any element, adding or removing atributtes, instead of directly adding a style to it using the style property as W3Schools does, but it probably a good starting point.
I hope that helps. Happy coding!
You are using Bootstrap so you already have a responsive nav menu.
You are using the wrong data attributes. Look at the docs for the version of Bootstrap you are using. V5 uses data-bs-toggle and data-bs-target, basically they just added -bs- to the two attributes.
To move the toggler to the left you just move the navbar-brand element after the button element. Or removing the navbar-brand element if you are not using it will also put the toggler to the left.
If you are talking about the actual design of the menu in the image you posted well that is a bit beyond what anyone can just tell you how to do. You should try doing it and ask for help as needed.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.