CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Irakli
Irakli

Reputation: 1143

Twitter Bootstrap custom theme for 1200px / 980px

I am using twitter bootstrap css framework. I have created custom navigation only for desktop width devices (1200 and up) and want to create more for each width layout (980px, tablet, phone). Although I have set visible-desktop, when I resize browser from 1200px to smaller my navigation bar ruins, but it isn't still hidden.

<div id="navigation-div" class="span6 offset2">

    <div id="navigation-nophone" class="visible-desktop">
        <ul class="menu clearfix">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

    <div id="navigation-phone" class="visible-phone">
        <ul class="menu">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

</div>

So I think that when window is resized smaller than 1200px the layout width becomes 980px but still bootstrap thinks that it is desktop. I don't know how to fix it.

I have no problem defining new parameters for 980px width layout and for 1200px width layout but can't find out how to switch from one to another (visible-desktop is true for both cases).

P.S.

the navigation switch for phones works fine!

Upvotes: 2

Views: 2676

Answers (3)

Ganpat Kakar
Ganpat Kakar

Reputation: 163

Try to put this css in your custom style.css file

@media (min-width: 768px) and (max-width: 1280px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar-nav {
        float: none !important;
        margin: 0px;
    }
    .navbar-nav {
        margin: 7.5px -15px;
    }
    .nav > li {
        position: relative;
        display: block;
    }
    .navbar-nav > li {
        float: none !important;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }
    .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    }
    .nav {
        padding-left: 0px;
        margin-bottom: 0px;
        list-style: outside none none;
    }
}

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25495

Fluid bootstap has desktop layouts for 980px up, and for 1200px up. They are both considered desktop so the responsive utility classes like visible-desktop won't be flexible enough for what you want to do.

Check out @media requests in the responsive bootstrap css file, this is probably how you want to go.

If you are new to this, here's a basic example of how it works to change the background color for different window widths: http://jsfiddle.net/panchroma/ZNSVr/

The CSS is logical enough, 

/* regular desktop */
@media (min-width: 980px) {
body{
background-color: green;
}

}

/* wide desktop */
@media (min-width: 1200px) { 
body{
background-color: olive;
}

}

Note the order of the different @media blocks does often matter.

The suggestion from @tahdhaze09 is considered best practice and using @media requests will likely be powerful enough to let you do what you want and have use just one set of nav links as well.

Good luck!

Upvotes: 2

tahdhaze09
tahdhaze09

Reputation: 2213

You should be using the same nav for all devices and allowing the CSS to take care of the nav formatting.

Take a look at the default samples for Bootstrap and examine the code for the navigation. The examples work great as you expand and contract the viewport.

http://twitter.github.com/bootstrap/examples/hero.html

Upvotes: 1

Related Questions