Hi! Yesterday I finished my Tribute Page and immediately plowed into Portfolio Challenge. I almost pulled it off but there is one problem though, a pesky navbar. No matter what I do, navbar text refuses to align itself nicely respectfully to the left and to the right On my screen elements are positioned to the left and to the right, but not as far as they could- they significantly gravitate towards the center. Iāve putted the navbar in a normal .container- putting it into āfluidā makes it bloated like a long dead cow
I would be joyful if You could point me into the right direction.
Here is a link to my codepen project. Note that it is still WIP and I will carve it nicely with more CSS and some JQ.
Thanks in advance!
https://codepen.io/Folrunge/pen/GmGRdq
Sorry for not-yet-responsive navbar
Hi Friend, if you are stucking in navbar, then you can go to getbootstrap.com and see what you are missing. or you can you defult skeleton of bootstrap navbar.
1 Like
You want to look into the classes navbar-right and navbar-left
1 Like
Hi Folrunge,
I think if you set your divs up differently such as div class=ārowā and use the bootstrap grid system you can set it where you want. I recently had trouble making my nav bar centered and responsive, but I finally got it to work. If you would to see an example of the code please go to my codepen here:
And/or example here
nav class=ānavbar navbar-inverse navbar-fixed-topā
**(changing container to fluid (to center) plus add row
and div class to positionā>
div class="container-fluid"
div class="row"
div class =ācol-sm-offset-3 col-lg-offset-4 col-sm-9 col-lg-5 text-centerā>
div class="navbar-header"
I hope this helps : )
Hi there! Been tinkering with navbar between Bootstrap learning sessions and came with a solution to my problem. Just wanna share this for a record. As I begun to understand that navbar sections are āfluid by natureā I headed on and deleted div with .container and boy that did the trick Thanks for all the support!
PS. Though I will give a shot with a .row just out of curiosity.