/    Sign up×
Community /Pin to ProfileBookmark

Bootstrap side nav question

Hey – I lost email with my account, I have been a member since about 2006 but hardly posted! I think I was Backspace.

Anyway

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.

https://imgur.com/a/UbDIdfE

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:

https://bootstrapious.com/p/bootstrap-sidebar

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.

https://bootsnipp.com/snippets/featured/admin-side-menu

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.

Ty in advance!

to post a comment
CSSFull-stack DeveloperHTML

0Be the first to comment 😎

×

Success!

Help @Unconformed spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...