Inspiring

Answered

Navigation with Bootstrap and Dreamweaver CC2017

Forum|Forum|8 years ago
July 3, 2017
3 replies
901 views

Hi,

I have started to build a new website for one of my clients, but I'm having a little issue with the navigation bar.
First of all, I would like it to be collapsed in all screen sizes, how do I manage that.

Secondly, when I make the screen smaller, the navigation "disappears" behind the images in the header, how can I move it to the front?

Website here: Välkommen till Norrbilar!

Grateful for any kind of help

Kind regards,

Carolin

This topic has been closed for replies.

Correct answer Nancy OShea

Bootstrap Off Canvas Layout (menu in sidebar).

Copy & paste this code into a new, blank document. Preview in browser to test with max & min viewports.

<!doctype html>

<head>

<title>Bootstrap Off Canvas Menu</title>

<style>

html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ }

body { padding-top: 70px; }

footer { padding: 30px 0; }

/**OFF CANVAS MENU**/

@media screen and (max-width: 767px) {

.row-offcanvas {

position: relative;

-webkit-transition: all .25s ease-out;

-o-transition: all .25s ease-out;

transition: all .25s ease-out;

}

.row-offcanvas-right { right: 0; }

.row-offcanvas-left { left: 0; }

.row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }

.row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }

.row-offcanvas-right.active { right: 50%; /* 6 columns */ }

.row-offcanvas-left.active { left: 50%; /* 6 columns */ }

.sidebar-offcanvas {

position: absolute;

top: 0;

width: 50%; /* 6 columns */

}

</style>

</head>

<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle Menu </button>

</p>

<h1>Hello, world!</h1>

<p>This is an example of an off canvas layout in Bootstrap. Resize your viewport to see it in action.</p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-success" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-warning" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-danger" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-info" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

</div>

</div>

</div>

</div>

</div>

</script>

//OFF CANVAS MENU FUNCTION

$(document).ready(function () {

$('[data-toggle="offcanvas"]').click(function () {

$('.row-offcanvas').toggleClass('active')

});

</script>

</body>

</html>

Nancy OShea

Correct answer

Community Expert

Bootstrap Off Canvas Layout (menu in sidebar).

Copy & paste this code into a new, blank document. Preview in browser to test with max & min viewports.

<!doctype html>

<head>

<title>Bootstrap Off Canvas Menu</title>

<style>

html, body { overflow-x: hidden; /* Prevent scroll on narrow devices */ }

body { padding-top: 70px; }

footer { padding: 30px 0; }

/**OFF CANVAS MENU**/

@media screen and (max-width: 767px) {

.row-offcanvas {

position: relative;

-webkit-transition: all .25s ease-out;

-o-transition: all .25s ease-out;

transition: all .25s ease-out;

}

.row-offcanvas-right { right: 0; }

.row-offcanvas-left { left: 0; }

.row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ }

.row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ }

.row-offcanvas-right.active { right: 50%; /* 6 columns */ }

.row-offcanvas-left.active { left: 50%; /* 6 columns */ }

.sidebar-offcanvas {

position: absolute;

top: 0;

width: 50%; /* 6 columns */

}

</style>

</head>

<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle Menu </button>

</p>

<h1>Hello, world!</h1>

<p>This is an example of an off canvas layout in Bootstrap. Resize your viewport to see it in action.</p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-success" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-warning" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-danger" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-info" href="#" role="button">View details »</a></p>

</div>

<h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>

<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

</div>

</div>

</div>

</div>

</div>

</script>

//OFF CANVAS MENU FUNCTION

$(document).ready(function () {

$('[data-toggle="offcanvas"]').click(function () {

$('.row-offcanvas').toggleClass('active')

});

</script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert

C

Carro000Author

Inspiring

Sorry for late answer, thank you, it worked very well, but the client wasn't happy with this solution, so I had to re-do it anyway. But thanks, I guess I can use it somewhere else

Kind regards,
Carolin

O

osgood_

Legend

Carro000 wrote
Hi,
I have started to build a new website for one of my clients, but I'm having a little issue with the navigation bar.
First of all, I would like it to be collapsed in all screen sizes, how do I manage that.

I would recommend an off-canvas navigation if you intend to have the navigation collapsed at all screen sizes.

Maybe one of the Bootstrap experts can help you or point you to an example that uses Bootstrap off-canvas.

If you want to ditch the Bootstrap navigation for something more simpler then I can most likely help you with the off-canvas BUT you do have to know how to copy and paste in code view.

C

Carro000Author

Inspiring

Thank you osgood, what does "off-canvas" mean?

O

osgood_

Legend

Carro000 wrote
Thank you osgood, what does "off-canvas" mean?

It means when you click the hamburger icon the naviagtion slides in from the side and then when you click the close button it slides back out of view again.

Nancy OShea

Community Expert

Part #2, add padding-top to your custom CSS code for the <body> selector.

body {

padding-top: 125px; /**adjust as needed**/

}

We would need to see your code to answer Part #1.

Nancy

Nancy O'Shea— Product User & Community Expert

C

Carro000Author

Inspiring

Please download the attached file to view this post

9139151.doc

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded