Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?


Tags: css,twitter-bootstrap,less

Problem :

My entire AngularJS website is reponsive. It is responsive to the screen size & loads the same pages for mobile, desktop, and tablet. However, I am having trouble getting the navbar to be a separate height on different devices in a responsive way.

Mostly, I just want the navbar to load at a slimmer height on mobile so that more of the screen space can be utilized for actual content that the user wants to see.

Right now, I am setting the height variable in variables.less which is where I know how to alter navbar height settings currently.

Variables.less

// Basics of a navbar
@navbar-height:                    64px; // most relevant line!
@navbar-margin-bottom:             @line-height-computed;
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
@navbar-collapse-max-height:       340px;

@navbar-default-color:             @gray-light;
@navbar-default-bg:                #fff;
@navbar-default-border:            transparent;

OK, so that is great, but I want 64px height to be set for desktop/tablet but 38px height to be set for navbar height on mobile screens.

I have already tried over-riding the navbar height in my local CSS with a media query but even with the !important flag it is not working to set the navbar to another height.

App.less <-- this doesn't work :(

@media (max-width: 767px) {
  .navbar {
    height: 35px !important;
  }
  .navbar-collapse ul li a {
    line-height: 35px;
    height: 35px;
    padding-top: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
  }

  .navbar-brand li a {
    line-height: 35px;
    height: 35px;
    padding-top: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
  }
}

NOTE I am using Bootstrap 3. Also, if it makes any difference, Bootstrap is imported in the main app.less file like so: @import "bower_components/bootstrap/less/bootstrap.less";

What should I do? How can this be done in a responsive fashion?

(A.K.A. without making an entirely different site for mobile)

Thanks for all the help!



Solution :

Based on comment above, I suggest you set min-height to 35px in your media query

.navbar {
    min-height: 35px;
  }

    CSS Howto..

    How can we wrap the line based on border size of windows browser?

    How to use css in extjs to modify the “browse files” button?

    How to add padding to 100% div in Bootstrap?

    AngularJS - how to refactoring a CSS code style

    How to Overlay a Transparent Navbar Over a Fullscreen Jumbotron

    How to override CSS style assigned to element

    in css, how to responsively stick element to certain background image part?

    A scrollbar showing within DIV. What CSS is causing this?

    Show a
  • line like is hovered
  • How to draw rectangle on the website to highlight?

    How can I create a DIV that scrolls with the browser's scroll bar, that contains flexible content

    parse JSON to HTML table: How do I format the css of the table?

    How can I use themeroller'ed styles in “regular” parts of a page?

    How does css scale transform affect document flow?

    How to fix this arrow shape created using CSS in IE9

    How to write special css for IE in external css file using css conditional comments [closed]

    CSS: How to get two DIVs side by side with automatic height, to the height of their container?

    Show popout bubble above when no space available below

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to customize HTML/CSS tooltips?

    How to hide this element using CSS or JQuery

    How to get ID from CSS to Javascript without getElementByID?

    How to specify a flex item to be of certain minimum width?

    How to get CSS to select ID that begins with a string (not in Javascript)?

    How to place a div on right side of cascading tables - CSS

    How to define cellspacing in CSS

    How to add a background to a boostrap grid row (including padding!)?

    How to center a child element in CSS, even if it is larger than the parent?

    How do I get rid of the white space at the top of my web page?

    How to select a td by position of its relative th?