• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Need help with Bootstrap CSS

Question

wrack    455

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

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
WinMunkee    51

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

Share this post


Link to post
Share on other sites
  • 0
saturnslullaby    5

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.

Share this post


Link to post
Share on other sites
  • 0
WinMunkee    51

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

Share this post


Link to post
Share on other sites
  • 0
wrack    455

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.