Help with Personal Portfolio

Help with Personal Portfolio
0.0 0

#1

Hi everyone-

I just started working on my Personal Portfolio, but have run into a snag that I don’t understand. Here is the link:

I would like the light blue box to remain at the top of the viewport as the user scrolls down the page (it currently does), and I would like it to align with the left edge of the large grey box div that it is within. I don’t understand why it is inset a few pixels from the left edge of the grey box…I did notice that if I remove the container-fluid class from the grey box div, that does align the left edge of the two boxes…but I’m not sure why using the container-fluid class creates the inset.

Thanks for the help!

-Travis


#2

Hello!
Try this:

<div class="container-fluid no-padding">
   <div class="ScrollingMenuBar"></div>
   <div class="container-fluid BackgroundDiv"></div>
</div>

And add this CSS:

.no-padding{
  padding:0 !important;
}

But!
I think, better solution is use this HTML

<nav class="navbar my-nav-bar navbar-fixed-top container">  //specal bootstrap classes for fixed navbar
</nav>

<div class="container gray-bg">
</div>

And this CSS:

.my-nav-bar {background-color: #90C3D4;     
}
.gray-bg {background-color: #d3d3d3;
  height: 1000px;  //remove this property, i add this just for demonstration
}

Good luck!(and sorry for my English)


#3

This was very helpful, it pointed me in the right direction, thank you!