Make 3 lines menu for large screens

Question

There are 4 links that would be displayed when someone clicks on 3 line menu Button in given image. My problem is that this menu works for small screen. I want to override this feature by displaying it at large screen like 767px etc. I am confused that where i should what piece of code in my css file. Help me!

Css_File

@charset "utf-8";
/* CSS Document */

.navbar-default[role="transparent_navbar"] 
{

  background-color: white;
  border-color: white;
}
.navbar-default {
  background-color: #787878;
  border-color: #5e5b60;
}
.navbar-default .navbar-brand {
  color: #6ecd6e;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffb600;
}
.navbar-default .navbar-text {
  color: #6ecd6e;
}
.navbar-default .navbar-nav > li > a {
  color: #6ecd6e;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffb600;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #787878;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #6ecd6e;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #5e5b60;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffb600;
  background-color: #5e5b60;
}
.navbar-default .navbar-toggle {
  border-color: #5e5b60;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #5e5b60;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #6ecd6e;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #6ecd6e;
}
.navbar-default .navbar-link {
  color: #6ecd6e;
}
.navbar-default .navbar-link:hover {
  color: #ffb600;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #6ecd6e;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffb600;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffb600;
    background-color: #5e5b60;
  }
}

you want to show the 3 line menu button in all size screen? – devfaysal May 01 '16 at 13:17 — devfaysal, May 01 '16 at 13:17

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

From the answer of another question, Write the following style in your custom css without using media query. This code will override media query and will show the 3 line menu button in all screen size

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

edited May 23 '17 at 12:22

Community

1
1

answered May 01 '16 at 13:23

devfaysal

167
2
9

Your code did not work. As it causes to collapse menu automatic when once opens – bc110402307 Syed Zeeshan Haide May 01 '16 at 14:06
alright, maybe you will have change something in html also. check this demo http://www.bootply.com/114896 – devfaysal May 01 '16 at 14:09
see my shared answer – bc110402307 Syed Zeeshan Haide May 01 '16 at 14:12
great. I also found a solution. Just needed to add display block. – devfaysal May 01 '16 at 14:15
I've edited my code and tested. It's working fine now. – devfaysal May 01 '16 at 14:19

score 0 · Answer 2 · answered May 01 '16 at 10:51

0

Add the following CSS to:

Display the full navbar on screens with a width of 767px or more .

Display the three lines on screens with a width under 767px.

@media (min-width: 767px)
  // add style for full navbar

@media (max-width: 767px)
  // add style for 3-line navbar

answered May 01 '16 at 10:51

The Codesee

3,714
5
38
78

I have attached all of my css in my question. Would you please like to tell me that which part is showing 3 line menu. Because i am new on bootstrap and css. – bc110402307 Syed Zeeshan Haide May 01 '16 at 10:58
You need to enter the style for the 3-line menu in `@media (max-width: 767px)` – The Codesee May 01 '16 at 10:59

score 0 · Answer 3 · answered May 01 '16 at 14:11

Thanks for everyone for spending their precious time. I found the correct answer from the link below

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

I implemented the below css code and found the solution exactly what i was searching for.

Code

@media (max-width: 1000px) {
  .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

score 0 · Answer 4 · answered May 02 '16 at 07:00

0

You can try Jasny's Plugin for this followed by this link:- Jasny Plugin For Offcanvas Bootstrap Menu

answered May 02 '16 at 07:00

webdevanuj

675
12
22

Make 3 lines menu for large screens

4 Answers4