Navbar collapse not working ::portfolio

[suryaiduri]

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

[rdev1163]

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

<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">

2. 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

[suryaiduri]

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

[pseudop]

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">

[rdev1163]

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.

[suryaiduri]

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

[suryaiduri]

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