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 !!
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,
- Here you declared a
data-targetattribute
<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.
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
- 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="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
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 
-
My photo isn’t not adjusting to the window perfectly
-
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
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
#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
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.
<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.
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 
I’ll try to follow your suggestions and 'll let you know If I stuck anywhere , again thanks for all your help !! appreciate it