CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

Same style for desktop and tablet with twitter bootstrap

I am using twitter bootstrap's responsive features to change menu style when the browser window has a max-width of 767px.

Here is the example: http://jsfiddle.net/G2mEv/2/

In full window: http://jsfiddle.net/G2mEv/2/embedded/result/

The problem is that the the different style is applied when window has a max-width of 979px. But I want to do this for 767px. Because I do not want to have a different menu for tablets, just for phones.

Css comes with twitter bootstrap, so I can just provide some html

    <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-target=".nav-collapse"
                                          data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#" tabindex="-1">
                    Some logo
                </a>
                <nav class="nav-collapse collapse" role="navigation">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </nav>
            </div>
        </div>

Any ideas how to manage this? Feel free to fork my example.

Upvotes: 0

Views: 2500

Answers (2)

hajpoj
hajpoj

Reputation: 13379

I think if you just delete everything in:

@media (min-width: 768px) and (max-width: 979px) { 
    /* delete all code */
}

It should work. You can create a customized bootstrap download that excludes the custom responsive css for screen widths between 768 and 979 px here:

http://twitter.github.com/bootstrap/customize.html

Just uncheck Tablets to desktops (767-979px) and download.

Upvotes: 1

isherwood
isherwood

Reputation: 61083

You need to change the min and max values for the media queries according to your preference.

For example, change this: 

@media (max-width: 979px) {
...
@media (min-width: 768px) {

to this:

@media (max-width: 767px) {
...
@media (min-width: ???px) {

Here's a discussion on how you might override media queries in another stylesheet if you'd rather not modify the Bootstrap file.

Upvotes: 3

Related Questions