Need help with Bootstrap CSS

[wrack]

Hi,

 

I am working on a small site for a friend and have started off with a template. I got things just the way I want but have run into small CSS issues.

 

Site is here: http://datasigns.codelake.com

 

As you can there is a navbar and when the browser is resized to be smaller, turns into a hamburger menu. The issue is the height of that section is bigger. I want the height of that navbar stay same no matter what the screen size is.

 

 

Any help is appreciated. BTW, this is my first bootstrap work and not from scratch

 

Cheers

[WinMunkee]

It appears the .second-navbar class has 8px padding on the top and bottom. Do you use firefox? I prefer it as my developer browser of choice.

 

EDIT: NEVERMIND!

I think this is your issue:

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px; 
    margin-top: 8px; <------------------------------ set to 0
    margin-right: 15px;
    margin-bottom: 8px; <------------------------------ set to 0
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

[saturnslullaby]

I say keep the padding... the issue I see is that the burger menu has a margin-top and bottom of 8px remark those out of bootstrap.min.css and all is good. You will likely have to un-minify the css first. Be careful with this!!!

 

EDIT: i was just playing some more and you can actually get by with just remarking or removing the margin-top: 8px; it aligns perfectly after that.

[WinMunkee]

  On 07/07/2015 at 01:25, saturnslullaby said:

I say keep the padding... the issue I see is that the burger menu has a margin-top and bottom of 8px remark those out of bootstrap.min.css and all is good. You will likely have to un-minify the css first. Be careful with this!!!

Yeah I caught that as well after playing with it in inspection mode. The padding is a good idea to keep, it gives the user more finger space.

[wrack]

  On 07/07/2015 at 01:22, WinMunkee said:

It appears the .second-navbar class has 8px padding on the top and bottom. Do you use firefox? I prefer it as my developer browser of choice.

Thanks. That is the only thing I use FireFox for to use the FireBug plugin. How did you find it so fast? I tried and tried and tried but couldn't find out that class name.

 

  On 07/07/2015 at 01:25, saturnslullaby said:

I say keep the padding... the issue I see is that the burger menu has a margin-top and bottom of 8px remark those out of bootstrap.min.css and all is good. You will likely have to un-minify the css first. Be careful with this!!!

 

EDIT: i was just playing some more and you can actually get by with just remarking or removing the margin-top: 8px; it aligns perfectly after that.

Yeah I am keeping the padding to keep it finger friendly.