how to add navbar break points for long nav links?

Bootstrap Studio Help
1

hi my first post i've had bootstrap studio a while now, few months or so and i like it :) great

i've looked through forum and i'm sure my issue must have been talked about already*? *i think its break points i need help with, and i didn't find post i read helpful! and i'm not seeing a answer? so i'll post my Q anyway

i'm having trouble with navbars!

so i have brand on my left - good i have contact wraped in nav on right - good

i have links in nav aligned to left next to my brand and heres the issue: i have too many links and in SM mode the links are being pushed down out of the nav! and i don't know how to fix this??

what i really need is to tell BS that my nav is too long and that it should change my nav into mobile mode nav but how do i achieve this?

2

I believe @windy has this answer for you on this thread https://bootstrapstudio.io/forums/topic/cant-overwrite-bootstrap-navbar-breakpoint/

Saj

3

hi thaks for replie and yeah thats the one i read but when i clicked on my nav and then on the cog i couldn't see anything for breakpoints? all i have is :

nav opts response v' access' wheres this down arrow on expanded ? i don't see it?

4

In the Nav Options you have the Expanded option defaulting to Always, set it to which break point you want the hamburger menu to show.

Saj

5

don't suppose you could give a screen grab i don't see this option : 'Expanded option' and i don't see 'always'

6

well i don't know where hell this nav edit button supposed to be??? u must have a different BSS to me then? i'm lost

7

I have a feeling you built your project in Bootstrap 3.3.7. If that's the case, it's much more difficult to handle something like that. If you started with Bootstrap 4 you'd have that option in the Navbar Options section when you expand it to reveal more options. So now the real question, is that the case and if so it's going to take a bit longer to come up with a solution then.

For a test, just start a new project, select Bootstrap 4 from the dropdown, you don't have to do anything with your current one. Then drag/drop the Navbar Component then select the Navbar in the Overview pane and check the Navbar Options in the Gear icon. If that section looks different then you've built your other project in Bootstrap 3.3.7. So that means this will take a bit more to figure out a solution.

Saj

8

ok i've taken a 30min break, i don't wish to start my first post negativity but i have a closing deadline! but during my break it occurred to me to check the other post post date and answer

yes i'm not using BS4 which explains why i'm not seeing the edit btn good news is i brought the full version with updates so i guess i'll have to update it

now the real question is, will i have to start my project over again if i update it now, or will the update blend itself in with current project (why i didn't update sooner, as wanted to finish this one first) its not end of the world if i have to

thanks for help

9

Ok, so here is working CSS code that will get you what I believe you want for a project that is built on Bootstrap 3.3.7. Here's the thing though, I only dealt with the default Navbar and it's coloring. You may have to make some additional edits if you are using a different color scheme for your Navbar.

This will cause the hamburger menu to appear and function like in a mobile view up to a viewport width that is less than 992px. You can adjust that if you need to for larger screen sizing, that's up to you. It is designed to only care to function this way for the SM sizing. If the screen width is less than 768px, it will function as normal, if it's wider than 991px it will function as normal. It only cares about screens between 768px and 991px which will continue to display the hamburger menu and function like it.

@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-header,.navbar-sm .navbar-nav,.navbar-sm .navbar-nav>li {
        float:none;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-toggle {
        display: block;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-collapse.collapse {
        display: none !important;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-collapse.collapse,.navbar-sm .navbar-collapse.collapsing,.navbar-sm .container-fluid>.navbar-header,.navbar-sm .navbar-nav {
        margin-left: -15px;
        margin-right: -15px;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .collapse.in {
        display: block !important;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm.navbar>.container-fluid .navbar-brand {
        margin-left: 0;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-nav {
        margin-top: 7.5px;
        margin-bottom: 7.5px;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-collapse {
        border-top: 1px solid transparent;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm.navbar-default .navbar-collapse {
        border-color: #e7e7e7;
    }
}
@media (min-width:768px) and (max-width:991px){
    .navbar-sm .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

You should be able to copy/paste this exact CSS code into your custom CSS file in the Design pane (bottom/right). You will also need to add the class navbar-sm to the parent Nav element that has the class navbar. So it should look something like <nav class="navbar navbar-default navbar-sm">.

Saj

10

hi and thank you saj your code works, well a bug to fix with drop down but i'm sure i can fix it, thanks :)

11

Your welcome, glad I could help :)

Saj

12

how do i style the links, they are far to left, how do i add padding and how do i get contact (right nav) to appear under the left nav links

13

Well I don't know what Nav component you used. So I'm grasping at straws here. But it sounds like you may have started with "Navigation with Search" or "Navigation with Button" or something else I don't know. But with either of those 2, if you add this CSS, it sets the right aligned element to fall under the other links rather than be on the right hand side of the links while in the special hamburger menu we've created.

@media (min-width:768px) and (max-width:991px) {
  .navbar-sm .navbar-form {
    width:100%;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .navbar-sm .navbar-right {
    float:none!important;
    margin-left:0;
    margin-right:0;
  }
}

If that doesn't work, I'm going to need more information about your nav setup or have you use the publish button on the top right and post the url so I can actually take a look at what you have.

Saj

14

hi saj thanks help again, kinda got the links how i want them but i've got issue with the collapse when i click the hamburger the mobile nav opens onto of my main nav and then drops downs to correct postion

copied from inspector :

html body nav.navbar.navbar-inverse.navbar-fixed-top div.container div#navcol-1.navbar-collapse.collapse.in

note, i've extended the height of orginal nav and i've tried adding a top margin but that moves both the mobile nav and main nav down, i don't know how to correct this issue?

15

scap above lol, i think i fixed it now thanks

16

Good to hear :)

Saj

17

Hiya Spacecoder,

Just so you're aware about the transition setup for BS 3.3.7 to 4 it can be done right inside BSS. Make a save of your project file for safe keeping as always and then in the File menu you will find the choices there for changing your site from 3.3.7 to 4 and the program will do it for you. It doesn't update your custom CSS file so don't be alarmed if some things may not look right, just go through the items and make the necessary changes needed and you'll be fine. I would suggest that you start your project "without" your custom CSS file (basically just remove it after you upgrade it to BS 4) and then do the changes you need. This way you have the classes you were using already in the elements, but ... you just recreate them in your custom CSS if you need to, or if you see that maybe it's not necessary anymore you delete them. Pretty slick setup that saves us a ton of transposing time!