Customising Bootstrap nav

1

Hi people!!

I’m trying to make it so when the nav gets stacked (when the screen size is reduced), the social media icons (in the navbar-right div), are displayed horizontally next to each other. What would be the best way to do that?

Thanks a lot for taking your time to read this and hope that makes sense!

Would appreciate any help! Thank you!

2

You could set an @media query for the bootstrap breakpoint (i.e. the point at which the design changes from horizontal to vertical) I found the breakpoint was 767px, so thats what I used.

Add a class ( i used right for this example) to your item you want to change, the li and ```a`

So all you would need to do is in your CSS. put this

    .right {
           display: inline !important;
}```

Hope that helps

- Nao
3

Thanks a lot NaoG! Was wondering if there was a way to do that in Bootstrap but will use this instead.
Appreciate your help, thank you!

1 Like
4

Hey NaoG (and anyone else who’s hopefully reading this!).

Been messing around trying to work out how to do this…Just trying to do it with 3 coloured Div’s outside of the nav to play around with it. I can use the mediaquery to keep them inline (thakns for that!), but when the mediaquery hits they shrink. I’ve tried adding a width in the mediaquery but that doesn’t change anything?

Anyone wonderful out there have any ideas of what I’m doing wrong?

5

@borndoghead I see the three colored DIVs at the bottom of your page.

In this case there is actually an easier way to keep them inline.

If you take a look at bootstrap documentation they explain the grid breakdown. and with using the “md” is has a higher breakpoint. But if you use “xs” instead it should always stay inline horizontally.

Try it out.

  • Nao
1 Like
6

thanks again! was having trouble using this earlier with the nav but think I was targeting the wrong Div. Thanks for the help, went back after your comment and sorted it!

1 Like
7

@borndoghead thats great.

What I use to help me out with this is chrome’s developer tools.
Using the inspect elements, it give so much information its really an amazing tool. You should check it out.

  • Nao
1 Like
8

do you know if there’s anyway to add your custom breakpoints within bootstrap?? If you wanted one smaller then xs would you have to do that using a mediaquery?

9

@borndoghead I dont know off the top of my head, I’ve been using mediaqueries. I know if you read the bootstrap documentation theres more information. But in what I had read it talked about if you were downloading bootstrap, not using the CDN link, So i dont know if you could override their breakpoints using the link.

You should look into it, let us know :slight_smile:

  • Nao