# Navbar collapse not working ::portfolio

**URL:** <https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225>\
**Category:** General\
**Created:** [September 21, 2017, 7:25pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225 "2017-09-21T19:25:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![suryaiduri](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suryaiduri/32/63550_2.png) [@suryaiduri](https://forum.freecodecamp.org/u/suryaiduri)\
**Post date:** [September 21, 2017, 7:25pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/1 "2017-09-21T19:25:06Z")

</div>

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 ☹ can anyone help me !!

Thanks !!

[PORTFOLIO](https://codepen.io/suryaiduri/full/dzQGag/)

---

<div class="post-metadata">

**Author:** ![rdev1163](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rdev1163/32/65004_2.png) [@rdev1163](https://forum.freecodecamp.org/u/rdev1163)\
**Post date:** [September 22, 2017, 12:09am UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/2 "2017-09-22T00:09:09Z")

</div>

Your portfolio looks awesome! Good job 🙂

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

```html
<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`  
e.g.

```html
<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),

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></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="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> ` at the bottom of your HTML.

Hope that helps! 🙂  
-RavenDev

---

<div class="post-metadata">

**Author:** ![suryaiduri](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suryaiduri/32/63550_2.png) [@suryaiduri](https://forum.freecodecamp.org/u/suryaiduri)\
**Post date:** [September 22, 2017, 1:09pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/3 "2017-09-22T13:09:07Z")

</div>

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

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 ☹ could you help me !!

Thanks for all you help !! 🙂 @rdev1163

---

<div class="post-metadata">

**Author:** ![pseudop](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pseudop/32/65729_2.png) [@pseudop](https://forum.freecodecamp.org/u/pseudop)\
**Post date:** [September 22, 2017, 2:32pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/4 "2017-09-22T14:32:18Z")

</div>

first, [validate](https://validator.w3.org/) your html and fix errors

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

```auto
#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:

```auto
<footer class="container">

```

---

<div class="post-metadata">

**Author:** ![rdev1163](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/rdev1163/32/65004_2.png) [@rdev1163](https://forum.freecodecamp.org/u/rdev1163)\
**Post date:** [September 22, 2017, 2:46pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/5 "2017-09-22T14:46:11Z")

</div>

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

```css
#avatar
{
  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.” [ARIA - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)

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

ok, now to the wrapping problem. 🙂

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

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

```

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.

 ![34 AM](https://global.discourse-cdn.com/freecodecamp/original/3X/f/7/f7cd896252f581551c739c121b21d4574ab1c3c8.png)

---

<div class="post-metadata">

**Author:** ![suryaiduri](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suryaiduri/32/63550_2.png) [@suryaiduri](https://forum.freecodecamp.org/u/suryaiduri)\
**Post date:** [September 22, 2017, 3:01pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/6 "2017-09-22T15:01:13Z")

</div>

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

 ![image](https://global.discourse-cdn.com/freecodecamp/original/3X/e/7/e73508ac2362da932d80d8ac85cbaff181314112.png)

---

<div class="post-metadata">

**Author:** ![suryaiduri](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/suryaiduri/32/63550_2.png) [@suryaiduri](https://forum.freecodecamp.org/u/suryaiduri)\
**Post date:** [September 22, 2017, 3:03pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/7 "2017-09-22T15:03:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:55pm UTC](https://forum.freecodecamp.org/t/navbar-collapse-not-working-portfolio/149225/8 "2021-01-16T17:55:42Z")

</div>