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

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

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;
  }

This CSS is causing it. Since the content is longer than 270px a scrollbar appears. <style type="text/css"> #blockStyle404MainArea9 { background-repeat:no-repeat; max-height: 270px; over-flow: auto; overflow-x: hidden; overflow-y: scroll; } </style>...

You can use jQuery id selector $(document).ready(function(){ //ID selector $("#some_random_id").hide(); //Attribute selector $('a[title="Open the library that contains this result"]').hide(); }); OR using css #some_random_id { display:none; } EDIT CSS .ms-calloutLink.ms-uppercase[title='Open...