Navbar collapse not working ::portfolio

Hello Everyone !

For some reason when I click on the hamburger ICON on my portfolio site , collapse effect is not working I tried everything to fix it but I couldn’t able to fix it :frowning: can anyone help me !!

Thanks !!


Your portfolio looks awesome! Good job :slight_smile:

A couple things to note with the drop down,
make sure your data-target has an id that matches,

  1. Here you declared a data-target attribute
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

make sure the target has the matching id

<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
  1. For Bootstrap UI functionality you must provide the javascript dependancies, in this case you must provide two dependancies with scripts tags at the bottom of your HTML,

note: CodePen allows you to add these dependancies (bootstrap 3 and JQuery) through the javascript config menu (clicking the gear icon in the javascript editor),

<script src=""></script>
<script src=""></script>

edited : I changed the script page below

Also note that I tried to make it work using CodePen’s JavaScript dependency provider for JQuery and it still didn’t work. I had to place <script src=""></script> at the bottom of your HTML.

Hope that helps! :slight_smile:

Hi RavenDev Thanks for you compliment :slight_smile: !! I greatly appreciate you for your clear explanation, that really helped me :slight_smile: , also I just have few issues on my page especially when I resize the window to MOBILE view 3 things were really annoying me :frowning:

  1. My photo isn’t not adjusting to the window perfectly

  2. In my my skills section two of the “” li “” elements going below the ’ + ’ ICON

I’m not sure why they’re acting like that :frowning: could you help me !!

Thanks for all you help !! :slight_smile: @rdev1163

first, validate your html and fix errors

plus icon fix: remove the <span> and <i> tags

#skills p {
  position: relative;
  padding-left: 30px;
  word-wrap: break-word;
#skills p:before {
  content: "\f055";
  position: absolute;
  left: 0;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 25px;
  color: #f16059;

footer width fix:

<footer class="container">

Small screens are tricky, I usually go down to 350px width for my smallest screens (which is iPhone5).

For your image, maybe try adding a max-width to your CSS. It will keep your image within a size limit, but this will cause your image to become oval with small screens, so providing a height: 100% will keep circular, the picture should shrink a little but you will keep your dimensions.

This worked for me

  display: block;
  margin: auto;
  border-radius: 50%;
  border: 2px solid black;
  max-width: 90vw;
  height: 100%;

for your list items, first we need to fix the HTML, there are a few rogue <span> elements you are using, we can just remove them. Also I noticed an aria-hidden="true" attribute, I don’t think thats needed either.

Note: “Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities.”

Also I renamed your <p> elements to <div> because they are not really paragraphs.

ok, now to the wrapping problem. :slight_smile:

The simplest solution I can think of would be to add spaces between the slashes, like so.

    <i class="fa fa-plus-circle"></i>
    JavaScript / jQuery / DOM / REST

that should allow it to break in sections, and assuming we don’t go under 350px width it should keep the majority of your text inline with your icon.

hi @pseudop thanks for your inputs !! When I try to validate I’m getting this error message

hey @rdev1163 thank you so much for getting back to me :slight_smile: I’ll try to follow your suggestions and 'll let you know If I stuck :frowning: anywhere , again thanks for all your help !! appreciate it :slight_smile: