Having trouble with Navbar

1

Hi everyone. I’ve been trying to complete the portfolio challenge but getting stuck on the navigation bar. Here’s the link to my pen:

Anyone know what’s wrong with my code? I can’t get my buttons to show up on the right side and I’m not sure what the square thing in front of my name is and how to make it go away.

Probably silly questions, but any help will be much appreciated. Thank you so much!

2

the small box is the button element
so what are you trying to do with the element ??..i could n’t find out.

3

Do you mean the briefcase icon in front of your name?
On your nav <ul class=" navbar colapse navbar-nav pull-right">

5

Fixed the small box problem…the code you provided doesn’t work.

6

I’m hoping the words ‘home’, ‘about’, ‘portfolio’ and ‘contact’ can show up normally on the navbar.

7

.nav,
.nav li{
display: inline-block;
text-align: center;
}

try this…i hope this is what you are looking for

8

I think the problem is that you’re using bootstrap 3 classes but your codepen is using version 4.
Here’s the documentation for bootstrap 4:

Also, in your codepen, you’ve to load jquery and bootstrap js libraries(on that order) in your settings.
Hope that helps.

9

When you do decide to use bootstrap in codepen there are some settings
you will have to make in codepen. Click on the settings button in the top portion of the codepen window.

  1. Click on HTML and copy and paste the following in the panel that says “Head Stuff”
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">.

    Click on CSS and in the panel near the bottom where you add external resources paste this in.
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
    If you try to use the quick add feature it will use the newer beta version of bootstrap. You really don’t want to use the beta version.

    Click on Javascript and again in the panel near the bottom paste in this:
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
    While still in the Javascript settings, also paste this into one of the panels.https://code.jquery.com/jquery-3.2.1.min.js
    Click on the green Save & Close button.
    Your codepen should now be configured to run bootstrap.

1 Like