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