Side navigation in Bootstrap

HTML & CSS
1

Hey

Hoping to get some Bootstrap help

**Problem (I’ll try articulate best I can)

Have been asked to construct this layout in bootstrap, at these breakpoints.

1397×5430 403 KB

The left navigation (the 3 col on the left) will eventually be replaced with a top navigation menu. So we are hoping to come back and adjust our col widths when it goes. The site will have a fixed width as per the diagram. The current navigation is fixed (I as doing this all in SharePoint via design manger using Master pages and page layouts, I have that side covered))

However, I don’t think bootstrap works well with a left-hand navigation like this. This site says there are no ways to do it with the framework, and offers some solutions:

I have done some research, and found a bunch of other examples where they use a side nav div and some custom css and JS to make this work.

I have an poor example of this NOT working here

https://codepen.io/Unconformed/pen/qKxKpZ

**What I think

I just go back and say let’s roll with the fixed nav, and construct everything else inside a 12 col, fixed-width container on the right.

** Bonus questions

  1. The breakpoints switch from a 30 px gutter to a 20px gutter, is this normal ok? I guess I could use a media query here

  2. I assumed I would be using a media query to make the left nav vanish (something like display:none;) at some breakpoint. But I am not sure if I can / should modify the DOM in this manner

  3. I have been asked to experiment, given some time to work this out, and I can use whatever version of BS I like. I was thinking of using the generator (https://getbootstrap.com/docs/3.3/customize/). Should I use this to set some breakpoints?
    3.1 I can’t use less / sass in this environment as I am unable to install a complier due to SOE permissions.

Thanks in advance!

1 Like
2

(thanks Techno bear for the edit:)

2 Likes
3

Update - I think an off-canvas solution will help

https://www.codeply.com/go/DlOYW6BGPa

4

Not sure what you mean as the navigation could go in the left column of your 3 column layout quite easily. Unless you meant you wanted a fixed positioned side navigation but then that wouldn’t really match what you were asking.

You don’t really want to replace/swap out your main menus as they are integral to the site. You need to construct the site in such a way that you use the same html in the top navigation as you do in the side navigation except that you style it differently. You do not want to hide the main menu and then show a completely separate menu for smaller screens if you can help it.

If you use bootstrap4 then you can use flexbox and that makes it easier to re-order the content (such as moving a side navigation to the top and still stay in the flow).

If however you want a fixed side navigation then I wonder why you are using bootstrap if you are going to style components in your own way and not use the standard bootstrap set up which caters for navigation quite easily.

If you are going to be bending the framework before you even start then I would consider why you are using it in the first place. That is not to say that you can’t bend the framework to your will but you do need a good understanding of css and html in order to do so and also a good understanding of bootstrap.

Bootstrap is not a substitute for not learning html and css :slight_smile:

Again this is a bootstrap question and gutters are integral to the column set up in bootstrap and you can’t really change the gutters without understanding how they fit into the row and column scheme. Gutters are created with padding on some elements and negative margins on inner elements so you can’t simply adjust one without knowing what other ones to also change. Again just go with the standard defaults because that;s effectively why you are using the framework in the first place.

No as I said above you don’t want to do that. You need to use the same html but make it appear where you want using css and suitable html to start with. Sometimes it is not possible to achieve due to design considerations but then it would be wise to change the design instead. Duplication should always be avoided if possible.

Use bootstrap4 as it is the latest version and uses flexbox which helps with re-ordering and formatting content.

Remember that using a framework still means that you have to have a good grasp on html and CSS and bending a framework to your own will usually requires a greater level of proficiency than rolling your own.

Off-canvas solutions are useful as they don’t affect the main layout and can easily be adapted for smaller screens. The only drawback is of course the extra click needed to show the navigation. I would generally prefer to have a top navigation when the page is wide and then change it to an off-canvas menu as space gets smaller but it does depend on the site so either are viable.

Using bootstrap defaults and mostly bootstrap classes you can construct the basic layout of your drawing just by following the documentation.

This was about 10 mins work so may have glossed over minor details.


(View on codepen for full effect)

Bear in mind I seldom use bootstrap so most of the above is found from the documentation quite easily.

2 Likes
5

Thanks so uch.

I will review in detail. I agree I can’t solely reply on the framework, I will continue my research. I have been using html and css for abut 10 years but I only ever do small jobs and I have deft missed a bunch of stuff. I get the basics.

FYI, here is my latests effort.

6

That’s a start but you don’t have the 3 columns to two columns effect as in my example (and your side nav is misplaced on smaller screens).

Also be careful with adding classes to the grid. You have added a card structure to the column class and used multiple columns.

e.g.

You have this:

<div class="row">
  <div class="col-sm-12 card">
    <h2>Item 1</h2>
  </div>
  <div class="col-sm-12 card">
    <h2>Item 2</h2>
  </div>
  <div class="col-sm-12 card">
    <h2>Item 3</h2>
  </div>
</div>

By doing that you lose the gutters on the elements and your cards should really be inside the columns.

It should be this:

<div class="row">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-body">
        <h2>Item 1</h2>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h2>Item 2</h2>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <h2>Item 3</h2>
      </div>
    </div>
  </div>
</div>

Refer to the documentation for how to implement the cards properly.

It’s ok to change the structure as long as you know what effect that will have on the layout. Remember this is a framework and any actions on the framework classes will likely have effects elsewhere as they are in multiple media queries. If you are not sure then work inside your columns with your custom classes to make the layout that you need.

As an aside when using codepen you don’t need to include the framework code as that can be selected from the settings page and you can add all the common frameworks, CSS and scripts. You usually just add the html normally found within the body element into the html pane and then your custom css in the css pane and js in the js pane. Look at my codepen for an example.

1 Like
7

Thanks so much, been hectic with unrelated stuff will get back to you! The classes in grid advice is awesome, had no idea, ty.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.