Hello, I’m having a problem with the navbar when creating my portfolio:
I’ve gotten the buttons to animate, but when they do, they cause the navbar to expand downward and the buttons push out a bit. I’m new to the whole Bootstrap, so I’m still learning. Any help would be greatly appreciated!
I can’t see the navbar on my phone, but as a general tip, you can add bootstrap to Codepen using the settings. Just go to CSS and JavaScript tab and add them. That way there’s no need to copy/paste into the stylesheet.
Also, you don’t need the link tags in Codepen to load styles. It will automatically pull the styles and JavaScript into the HTML.
I do have them added in the settings. The links are there because I code in Sublime and just cut and paste into CodePen. I’m just not sure why the navbar is behaving the way it is.
Your navbar is jumping in size because the borders around your buttons are pushing the navbar down. To fix this, increase the min-height of the navbar-nav class from 50px to 52px.
And there’s no way you need all of that CSS in your stylesheet. It’s slowing down your pen’s loading time in a major way, and makes it hard to troubleshoot your code, not just because of the lag, but because it makes finding and identifying the customized CSS impossible. You should remove everything you haven’t customized yourself, and only add to it as necessary.
I didn’t realize the CSS would slow it down. Thanks for the help!