Collapsable navbar not working

Collapsable navbar not working
0

#1

Hi all - I am very new to coding, and am trying to create my personal portfolio page. Somewhat ambitiously, I wanted to create a collapsable transparent navbar that is fixed to the top. I also found a fancy JavaScript code for the three bar icon that animates when clicked…

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!


#2

Hi,
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 :slight_smile:


#3

Hey

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


#4

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


#5

Hi again,
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 :slight_smile:
Option 2 is to use media queries.
I’m still learning too so if you find a better solution please share :smiley:


#6

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!) :slight_smile: