• 0

Need help with Bootstrap CSS


Question

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.

 

post-190274-0-55733300-1436228932.png

 

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

 

Cheers :)

post-190274-0-55733300-1436228932.png

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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

  • Like 1
Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

  • Like 1
Link to comment
Share on other sites

  • 0

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.

 

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.

Link to comment
Share on other sites

This topic is now closed to further replies.