The issue is that I just can’t seem to get this to be collapsable. The three bars always appear and in the wrong order. When on a larger screen, the navbar should just have glow works on the left, and then three links: About, Portfolio, Contact, on the right. Then when collapsed About, Portfolio, Contact should be the drop down options under the three bar icon.
What am I doing wrong?!
Here is the code pen link: Glow Works portfolio page
I really hope someone can help!
I’ve seen a couple things. First is that you have an extra container in your code right above the nav-bar header. Also I see that you are using bootstrap 4, which is new version and it has a lot of changes. I’m not up on all of them yet, but I’ve seen others with navbar problems using version 4 because there are new classes and other changes. Here is the link to the changes:
I hope this helps, it sounds like a cool idea! Good luck
I think you have a few classes wrong, try making the following changes
remove navbar-default and replace it with navbar-toggleable-md
remove navbar-toggle and replace it with navbar-toggler
Thank you both… Did not even realise that I was using a newer version of Bootstrap! That is helpful.
I changed the classes as you suggested @Nektario and that worked a treat, I then looked through the really helpful link you provided @lestec and cross-referenced the code with the one there.
I am basically 95% there now - my only remaining gripes are:
- The menu options I wanted to be right aligned when viewing on a larger page (so in place of the
- The drop down (when collapsed) should be under the toggle icon (3 bar icon) rather than under the title
Any idea how that can work? Here is the link again:
Glow Works portfolio
Thank you SO much for your help both of you
I think for the larger view size you can do one of 2 options. In bootstrap its set up in a 12 column grid system. So a row has 12 columns. Within that row you can position items using push, pull, offset. It looks like this:
div class =“col-sm-offset-3 col-lg-offset-4 col-sm-9 col-lg-5 text-center”. ( I believe you also need to set it in a container-fluid) Each screen size is going to position the items based on the screen size. I have an example of my nav bar centered and responsive in codepen if that would help you. Just let me know
Option 2 is to use media queries.
I’m still learning too so if you find a better solution please share
Thanks so much @lestec - I really appreciate the follow up. Good ideas which I shall look into.
I’ll also let you know if I find something better (although that’s highly doubtful!)