1

i use startbootstrap-small-business template and try to adapt this to my needs. I added a new logo and was forced to change the height of navbar to ca. 120px. What i need/want to do now is to align vertically the links on the right side of the logo. They need to be in the middle of navbar. I tried to use line-height (line-height:60px and @media {line-height:2px }) for the .navbar-nav li a element of the navbar and it works for normal browser resolution, but when I change the size of the browser to check how does it look in small devices the line height is not overriden via @media it still takes the size of 60px and the height of the links in dropdown menu is to big. Does someon can help me?

/*!
 * Start Bootstrap - Small Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    padding-top: 110px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}

.navbar {
    min-height: 100px;
}


.navbar-fixed-top .nav {
    padding: 0;
}

.navbar-nav li a {
 line-height: 60px;
}

.navbar-fixed-top .navbar-brand {
    padding: 0 15px;
}

.navbar-inverse {
    background-color:#000;
}

footer {
    padding: 30px 0;
}

@media(min-width:@screen-sm-min) {
    body {
        padding-top: 110px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    }

    .navbar-fixed-top .navbar-brand {
        padding: 0;
    }

    .navbar-nav li a {
       line-height: 2px;
     }
}
amphetamachine
  • 27,620
  • 12
  • 60
  • 72
kondorek
  • 29
  • 1
  • 6

2 Answers2

1

I've got it with the help of this topic: Bootstrap 3 Navbar with Logo. This is solving my problem

@AmperPil your idea doesn't work in my case ;) Thanks anyway for your help

Community
  • 1
  • 1
kondorek
  • 29
  • 1
  • 6
-1

Try using this for the media query instead:

@media screen and (max-width: 300px)

300px being whatever you want the screen size to be.
Yours might be be working because bootstrap uses less to make those media queries which it seems that you might not be using. MDN and W3Schools pages on media queries if they will help at all.

AmperPil
  • 31
  • 7