Why cant i fix the navbar? help

Why cant i fix the navbar? help
0

#1

please help, it works just fine if see the same code on chrome or firefox… why does not work on pen?
(its ugly but im not done yet xD)

https://codepen.io/s1d4rt4/pen/QvXJJv?editors=1100

thx


#2

i changed the “position:fixed” form the css to the

and it worked… still i dont like it that way…

#3

Hi,
A couple things I noticed. First is that you do not have the link for the javascript portion of bootstrap set up. Also codepen now uses bootstrap 4, which has changes to the navbar, here is the link:


I hope this helps :smile:


#4

thx! but im using bootstrap 3 (at the beginning of the code)


#5

It could also be that you are not using a nav class around the code for the nav bar. like this
nav class=“navbar navbar-default” (before container-fluid). Here is an explaination:
https://getbootstrap.com/components/#navbar


#6

yes, because i decided to do the navbar myself, so i can learn more =)


#7

What do you want fixed? maybe I can help. Or did you mean just position fixed?


#8

Ahh ok, I understand now. That is very cool. Are you going to make it collapsible also? And if so do you have to write the javascript to make it work or can you use bootstraps? Sorry so many question, I’m still learning too so I like to see different methods.


#9

no, just fixed… but i think you can use just bootstraps


#10

just the position, but i already did it. Now im strugling whith the divs width, i want to expand it but it does not work on codepen, but it does in firefox and chrome… i think i hate codepen


#11

Are you talking about the padding for the images? That can be fixed by removing the container fluid class or go with .container-fluid{
padding-left:0!important;
padding-right:0!important;
}
Because you said you are using bootstrap 3, even if it’s container-fluid it adds 15px padding on both side. In bootstrap 4 they have it set at 0.


#12

no, i mean the div, i want to fill it with some color and i dont want it with white spaces in the left and right borders.


#13

Same thing, you have the div with class container-fluid as the first div that contains the rest of them. So you will have the padding from that class.

You wanted it like that?


#14

that’s it! perfect, thanx =)


#15

Np, just remember it’s not always best to use !important(when dealing with a lot of css), but in some cases like that on bootstrap you may need to use it. I think you can counter the container-fluid by adding another div inside it with the class “row” that adds -15px margins on both side, but that just adds another div.In fact, I don’t think you need it(the container-fluid class). Also learn to close tags properly from the start, for example you don’t have a close tag for the'<div class="container-fluid"> '. Best to have good habits from the start :slight_smile: . Good luck and keep at it


#16

thank you, i apreciate your advice


#17

Sorry, I have another question. I was trying to get the space betwin divs with div class=“portfolio” style="margin-botton: -20 and in the css too, but i don work on codepen (but do in firefox and chrome)


#18

If you want to add margin it needs to be positive and always add a unit of measurement like px, em; so add margin-bottom:20px. If it’s negative the element below will go up.