last day (14 days later) » 

7:44 AM
2
A: How do I edit the style of bootstrap navigation bar?

kittyCatThis is happening because your css is being overwritten by the default bootstrap css. You need to make only one change. Use .navbar.navbar-default instead of just .navbar-default everywhere, this will give your css preference over the default css. Here's a good article on css specificity : htt...

 
Thank you. Do I make the same changes to edit the font in the navbar?
 
@Paula Nguyen Please don't forget to accept the answer if it solves your problem, you know click on the checkmark on the left of my answer.
@Paula Nguyen give me 2 minutes . I will update my answer.
Your font is looking fine in the snippet but I updated my answer just in case. Use .nav.navbar-nav instead of just .navbar-nav, I tis always good to take precautions when using a framwork.
If there's anything else, let me know. If not dont forget to accept the answer
 
Thank you so much for your help. Sorry one last question. How do I remove the black line under the nav bar when I minimize the browser after I click on the menu button?
 
I updated my answer, I think this is what you want, if not then let me know. I changed the border to border:none: for .navbar-colllapse
@Paula Nguyen Can you accept the answer now. YOu know click on the checkmark on the left of my image, it would turn green when clicked. See this image imgur.com/a/iBwN4
 
I actually don't see the checkmark.
 
7:44 AM
ok. see this similar image imgur.com/eAzZiHP .Do you see the right-sign in the red area, (below up and down arrows) click on it to accept an answer.
 
got it. Sorry one last question. Is there a way to not have the left-hand side bar overlap with the logo when you minimize it?
 
Short way is to change the <div class="container"> just after your <header> to <div class="container-fluid">. I updated this in my answer. I f you don't like it let me know. I will suggest the another way.
 
It kinda pushed the text more towards the side on both sides. Is there anyway to edit the margin to the left and right of the bar?
It still cuts into the logo in the center for me with that change.
 
ok. I updated my answer. I added a little bit css and class of .container.
 
Awesome thank you that worked perfectly. If you don't mind I have one small question. For some reason if I move the first line in the html file.<script src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/…; to the below the links the toggle menu bar doesnt work anymore. Could you explain why that is?
 
7:44 AM
you have to keep it above bootstrap.js since bootstrap javascript requires jquery to work. move both of them together and keep jquery.js above the bootstrap.js
 
Also is there a way to center the menu bar when it's minimized and the social media icons in one line like so: nativefox.com
 
do you mean vertically centered or horizontally centered.and by minimizd, you mean smaller screen size(collapsed state)?
 
Yes collapsed state. So the left nav bar would be vertically centered and the social media icons horizontally centered. Thank you so much for your help.
Do you also know how to change the menu bar to an "X" after we click on it?
 
can you ask that as a separate question since the answer I know will have much different code than this answer. Also if someone does it without altering the code that much then that would be good for you.
 
Okay sure. Also regarding the previous question. my logo is a bit bigger so it still cuts in. Could you explain how to modify this numbers so it'll fit: media (min-width:468px) and (max-width:991px){ .container.navbar-container { width:100%; padding:0; } }
Would it be modifying the min-width?
 
7:44 AM
this css fort ` .container.navbar-container` is already giving you the maximum available width, you can't get any more space now. Try defining size for the logo. like this media (min-width:468px) and (max-width:991px){ .container.navbar-container { width:100%; padding:0; } .navbar-brand img{width:100px;}}
If still it overlaps then reduce paddings and margins for your links on the left.
and why did you unaccepted my answer? the other one doesn't even answer the question properly. It won't help you anymore then my answer :|
 
Oops sorry I must have unaccepted in on accident
 
No, it's okay. That answer gave you a right tool but you should upvote it (click on the up arrow) instead of accepting it (cicking on right-sign).
I was a bit frustrated, actually I was babysitting my cousin and he won't stop crying. I am sorry, I was rude earlier.
 
No you weren't rude at all. I'm sorry I had so many questions. Thank you so much for your help!
 
Is it still overlaping or did you manage to make it work?
 
7:59 AM
I tried to do what you suggested but it is still overlapping currently
 
8:25 AM
ok. well you have already utilized maximum space. I think the last resort is to collapse the menu before overlapping. Like currently it collapses on 768px. Do it on 992px. Search for "collapse bootstrap menu on different screen size". I am sure you'll find a good answer. I haven't done this before since I make custom menus for my website.
Also about turning the menu into cross. You have to know javascript for that. But this codepen contains good animations. You can put it directly in your website. codepen.io/designcouch/pen/Atyop
 
9:24 AM
Oh thanks.
Is there any way you could show me how to add a footer with a copy right message no borders or anything just the text centered
 

last day (14 days later) »