Subscribe or Login to watch video

Login or Subscribe to watch video

33 - Answer - How to remove the nav bar line from Bootstrap.

Questions & Comments

Robert Dixon - 1 year ago

I enjoyed your training video using Slick Nav, now I am watching the bootstrap video and I am not 100% sure which way to go. I really like the bootstrap approach and will be incorporating these in my future web-designs and feel that the bootstrap navbar is the way to go, especially if I am using all the other bootstrap components on my webpage. What are your thoughts and preference's?

Administrator Tayla Coman - 1 year ago

Hi Robert, personally I'm a fan of frameworks moreso than snippets. Bootstrap has so many great components that tie in nicely with the whole framework. I'd recommend Bootstrap just because it's always going to be quicker and easier to impliment into a project you might be starting from scratch. However I think snippets like SlickNav have their places in the web-eco system as well. For example if you're dealing with a site that's already partially built, it might be too hard to impliment Bootstrap for the issue of conflicting class/id's. If you like Bootstrap you might also like to check out Materialize. They've got an awesome and very different style of frontend styling to Bootstrap but they work pretty much the same. I plan on making a course for Materialize in the near future so watch out for that!

JEROME BALDSING - 9 months ago

Dear BYOL's, Thank you for ataking the time to read my message.

I'm having trouble trying to customise a navbar for mobile which stacks the name of the nav item on top of each other (i.e services, Contact. etc) Please see attached img of what I've in mind, any help would be kindly appreciated.

Administrator Tayla Coman - 8 months ago

Hi Jerome,

This is probably the course you're looking for to teach you how to make that kind of responsive Nav

JEROME BALDSING - 8 months ago

Hi Tyler, thank you so much for your reply. Would you be able to remove my screenshot above please?

JEROME BALDSING - 8 months ago

Hi Tayla, I'm sorry to bother you again, but can you remove my screenshot above please? Jerome

ALL ACCESS: $12 per Month + Cancel anytime   

Video Transcription

Hey, welcome back. Did you do it? Ah, good on you. Just in case you didn't, let's work out how to get rid of that white line. We need our Code Navigator. I've selected the Navigation bar up here. I'm going to right click it, go to 'Code Navigator', and figure out where it is. Now, I've done it before, so I'm going to cheat. I know it's none of these. You have to get all the way to that Navbar one, and here, there's a Border as well, it's 1 pixel, it's solid, and it's also transparent, it's weird.

So what we need to do is, we need to override this one, because we can't update it, because it's css. Luckily, earlier on we already made a Navbar Class that matches the same one in our Bootstrap. If you haven't, you're going to have to go make one. So what I'm going to do is, I'm going to go through and set the border to '0 pixels'. So I'm going to go back in here. I’m going to find my Main CSS. I'm going to scroll along the bottom, here's my Navbar. If you don't have it, you got to create one, .navbar. And then there's an option here at the top. Switch to 'Border', and width is '0 pixels'. And hopefully now, over here, our white line has gone.

Great, well done. Let's go on to the next video.

ALL ACCESS: $12 per Month + Cancel anytime