Discussion of Coding

Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Sunday, August 14, 2016

Bootstrap multi-level navbar - how to prevent content from collapsing

Author:  |   |  No comments | 

Bootstrap multi-level navbar - how to prevent content from collapsing


Firstly, I guess this serves as a nice example of how multi-level navbars can be achieved with Bootstrap (it was something I struggled with for a long time)

Secondly, I have a question which regards preventing content from collapsing on the navbar.

My navbar has three rows, two navbar-default and one navbar-inverse, and three buttons to control each section when it is collapsed:

Code:

https://jsfiddle.net/7Ltspomz/

When it's not collapsed (this is how I want it to look) enter image description here

When it's collapsed (this is what it currently does) enter image description here

I don't want this (which is what it currently does) enter image description here

I would like this... (when it's collapsed) enter image description here

...and this (when it's expanded) enter image description here

The only way I've managed to achieve this is to have two dropdown buttons; one which displays for sm, md and lg, and one that only displays in xs. I don't particularly like this approach since it is duplicating content - even though it's not a lot of content, from many perspectives, this isn't particularly nice.

Any ideas on how I can achieve this?

Answer by Jerad Rutnam for Bootstrap multi-level navbar - how to prevent content from collapsing


You can add a duplicate dropdown for the responsive mobile view and hide the other dropdown menu,

HTML,

      
          
                                                                                NewCo

CSS,

.navbar .navbar-header .navbar-toggle.pull-left {    margin-right: 0;    margin-left: 15px;   }    .dropdown-btn {    margin-top: 8px;    margin-right: 15px;  }

See the example: https://jsfiddle.net/7Ltspomz/12/

Anyhow if you don't like to duplicate the dropdown you can simply do some modifcations to the markup and add some tricky styles,

HTML,

CSS,

.navbar .navbar-header .navbar-toggle.pull-left {    margin-right: 0;    margin-left: 15px;   }    .dropdown-btn {    margin-top: 10px;    margin-right: 15px;  }    .search-input {    margin-top: 0px;    margin-bottom: 0px;    padding-top: 0px;    padding-bottom: 0px;  }    .search-input > form {    margin: 10px 0;  }    @media screen and (max-width: 768px) {    .dropdown-btn {      position: absolute;      top: -2px;      right: 117px;    }  }

See the example: https://jsfiddle.net/7Ltspomz/20/

Answer by tmg for Bootstrap multi-level navbar - how to prevent content from collapsing


You can make 2 x .navbar-header. One for .navbar-brand and left .navbar-toggle button and for one for language .dropdown and right .navbar-toggle buttons.

      
            
                              NewCo

#siteNav block had to be after 2nd .navbar-header, in order for collapse to appear below main navbar in xs screen, so I added a custom class to reorder the divs in sm and larger screens.

@media screen and (min-width: 768px) {       .navbar-header.right-side-menu {            margin-left: -350px;            margin-right: 225px;       }  }    .navbar-header.right-side-menu .navbar-form {       border-color: transparent !important;       margin-right: 15px;       padding: 0;  }

Complete code in jsfiddle.

Answer by TTCC for Bootstrap multi-level navbar - how to prevent content from collapsing


I think you can't achieve this using only bootstrap styles.

You can define your specail styles, and move the dropdown-menu outof #siteNav. Like this:

      
          
              
                                                  
          
          
              ...

And

.nav-special {      position: absolute;      right: 133px;      top: 8px;  }    @media (min-width: 768px) {      .nav-special-contailner {          position: relative;      }      .nav-special {          right: 0;          margin-right: 250px;      }  }

Here is a jsfiddle.

Answer by Himanshu for Bootstrap multi-level navbar - how to prevent content from collapsing


You can add a duplicate dropdown for the responsive mobile view and hide the other view, I just update your fiddle.. check here

HTML

CSS

.navbar .navbar-header .navbar-toggle.pull-left {    margin-right: 0;    margin-left: 15px;   }    .mobile{display:none;}    @media (max-width: 767px){    .desktop{display:none}      .mobile{      display:block;      margin-top:8px;      margin-right:15px;    }  }

Answer by Vladislav Roscovan for Bootstrap multi-level navbar - how to prevent content from collapsing


Here is how a solved this problem. Moved up the button from form and added some styles for bootstrap classes, details:

      
          
                                NewCo

CSS:

.navbar .navbar-header .navbar-toggle.pull-left {    margin-right: 0;    margin-left: 15px;   }    .additional-nav {      display: inline-block;      float: right;  }    .navbar-header {      display: inline-block;  }    .additional-nav .btn-group, .additional-nav .btn-group-vertical {      position: relative;      display: inline-block;      vertical-align: middle;      float: right;      padding: 9px 10px;  }    .site-nav {      float: right;  }

https://jsfiddle.net/7Ltspomz/23/


Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72

0 comments:

Post a Comment

Popular Posts

Powered by Blogger.