• 0

Need help with Bootstrap CSS


Go to solution Solved by WinMunkee,

Question

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.

 

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 post
Share on other sites

4 answers to this question

Recommended Posts

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

  • Like 1
Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
WinMunkee

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 post
Share on other sites
  • 0
wrack

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 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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save 97% off this Complete One-Hour Coder Bundle - now just $34.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off this Complete One-Hour Coder Bundle. Train your inner programmer with 6 one-hour courses on C++, CSS, HTML, JavaScript, and Python.



      This bundle consists of the following courses:

      C++ Foundations
      Begin Your Coding Journey with the High-End, Popular C++ Language for Software & Game Development CSS Foundations
      Enhance Website Aesthetics & Designs with the Style Sheet Language CSS HTML Foundations
      Start Creating Your Own Websites, Web Apps, & More Java Foundations
      Master the General Purpose & Object-Oriented Language of Java for Mobile Development JavaScript Foundations
      Learn JavaScript for Web & HTML5 Game Development Python Foundations
      Learn the Foundations of Python for Data Science & Machine Learning Good to know
      Updates included Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase For specifications, license and instructor info please click here.

      Here's the deal:
      This Complete One-Hour Coder Bundle normally costs* $1,200, but it can be yours for just $34.99 for a limited time, that's a saving of $1,165.01 (97%) off.

      >> Get this deal, or learn more about it here <<
      See all Online Courses on offer. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Bootstrap: Related Tools & Skills - free eBook
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?
      We’ve scoured the web for Bootstrap tools and playgrounds and shared with you only the very best out there.



      Web designers and developers operate in a great industry. Our expertise and access to affordable development resources gives us the ability to do something unique — something which is found in few (if any) industries: the ability to release tools for other web designers and developers.

      Tools for people like us are plentiful. Many of them are free, some are paid. All of them are awesome.

      There are tools and playgrounds for almost everything — including Bootstrap. Let’s review the best of them.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Bootstrap: Related Tools & Skills - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off this 2020 Ultimate Web Developer & Design Bootcamp Bundle. Kick off your career as an expert web developer & designer with 69+ hours of content on Java, HTML, CSS3, APIs, and more.



      What's the deal?
      This deal consists of the following courses:

      The Complete 2020 HTML5 CSS3 Course with Flexbox, Grid & SASS
      Acquire Fundamental Skills You Need to Become One of the Most Sought-After Web Developers Modern Web Design Complete HTML & CSS
      Learn HTML, CSS, & JavaScript and Create Web Pages from Scratch The Ultimate HTML Developer
      Learn HTML/HTML5 & Put Your Skills Into Practice by Creating an Entire Web Page Build Responsive Real-World Websites with CSS3 v2.0
      Learn CSS3 Flexbox, Animations, Transitions, Transformations & Responsive Design Create an 8-Bit Website
      Create an 8-Bit Style Website from Scratch with Just HTML & Some Basic CSS Understanding APIs & RESTful APIs Crash Course
      An Introduction on How APIs & RESTful APIs Work — No Coding Involved JavaScript for Beginners: Learn with 6 Main Projects
      Everything You Need to Become a Confident JavaScript Developer Git Essentials: The Step-by-Step Guide to Git & GitHub Mastery
      Master the Daily Git Workflow That Every Developer Uses JavaScript Essentials
      The Basis of JavaScript Including Programming Fundamentals You Can Use in Vue.js, React.js & Node.js Python for Everybody: The Ultimate Python 3 Bootcamp
      Learn Python from A to Z & Become a Ninja Python Coder Web Design JavaScript Front-End Code Course
      Explore How to Write JavaScript Code to Create Interactive & Dynamic Web Pages Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This 2020 Ultimate Web Developer & Design Bootcamp Bundle normally costs* $2,200, but you can pick it up for just $39.99 for a limited time - that represents a saving of $2,160.01 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 70% off Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Save 95% off this Complete IT for Beginners Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can save 95% off* this Complete IT for Beginners Bundle. Kick off your IT career with 10 courses on coding, web development, programming and more.



      What's the deal?
      This deal consists of the following courses:

      Coding for Beginners Certificate
      Learn Object-Oriented Programming & Run Your First Lines of Actual Code IT Level 2 Certificate
      Improve Productivity Working with Spreadsheets, Word Processing & Presentation Software Introduction to Cloud Computing Certificate Course
      Understand Cloud Services & Improve Your Company's Functionality Introduction to Amazon Web Services Certificate
      How Amazon Web Services Work, What They Offer & How They Can Benefit You Level 1 Python Certificate
      Code with Greater Uniformity & More Simplicity Using Python Programming Language Level 2 HTML5 Certificate
      Practice HTML Coding & Create Functional, Efficient Webpages Level 1 HTML & CSS Certificate
      Start Developing Your Own Apps by Learning HTML5 & CSS Level 1 Programming Certificate
      Take an In-Depth Look at Computer Programming & Prepare for a Career in Web Development Web Applications for Beginners Certificate
      Get Equipped with the Knowledge & Tools to Build Your First Web Application Intro to Gaining a Cisco Certificate
      Begin Your IT Journey by Preparing for the Sought-After Cisco Certification Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This Complete IT for Beginners Bundle normally costs* $971, but you can pick it up for just $39.99 for a limited time - that represents a saving of $931.01 (95%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      No, your privacy was not breached at NordVPN (see why).

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.

    • By News Staff
      Save 98% off this Ultimate Web Coding for Everyone Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 98% off* this Ultimate Web Coding for Everyone Bundle. Dive deeper in the world of web coding with 8 courses on Python, Ruby, Javascript, PHP, HTML, Bootstrap 4, MySQL and Node.js



      What's the deal?
      This deal consists of the following courses:

      Python Programming for Everyone
      Learn Basic to Advanced Python 3 Programming in Only an Hour, Python 3 Download Included! Ruby Programming for Everyone
      Get Up to Speed with This Beginner-Friendly Language in Just One Hour JavaScript Programming for Everyone
      Learn to Code Javascript Like a Professional Programmer Intro to PHP for Web Development
      Learn PHP for Web Development & Become a Backend Coder in No Time HTML & Bootstrap CSS Programming for Everyone
      Learn to Build Awesome Websites Using HTML & the Bootstrap CSS Framework CSS Bootstrap 4 for Everyone
      Learn the Latest Version of Bootstrap 4 from Start to Finish & Build 3 Website Projects Intro to MySQL with Node.js: Learn to Use MySQL with Node
      Learn How to Use MySQL Databases with Node.js & Explore What These Databases Can Do Node.js Absolute Beginners Guide: Learn Node from Scratch
      Learn Node.js to Build Websites & Host Them Live on Heroku Webhosting Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      What's the benefit?
      This Ultimate Web Coding for Everyone Bundle normally costs* $1,600, but you can pick it up for just $29 for a limited time - that represents a saving of $1,571 (98%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.

      Save even more!
      Stick with Neowin Deals and earn credit or even deeper discounts.

      Check out our recent deals here or on the Neowin Deals site. For every $25 spent, you get $1 credit added to your Neowin Deals account. Refer the deal for $10 credit via social media or email and if it results in a purchase of at least $10, you'll get $10 credit added to your account. 10% off for first-time buyers: be sure not to dismiss the popup offer to subscribe to email updates on the deals page in order to profit! Not for you?
      If this offer doesn't interest you, why not check out our giveaways on the Neowin Deals website? There's also a bunch of freebies you can check out here.

      Miscellany and the fine print!
      In some cases, such as with Online Courses, a store credit refund within 15 days of purchase is possible if you are unhappy with it; this does not apply to all deals, so please do check the terms on the page before making a purchase.

      Check our other recent deals, before they expire, or our preferred partner software for Private Internet Access and NordVPN deals.

      How can I disable these posts? Click here.

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs. *Values or percentages mentioned above are subject to StackCommerce's own determination of retail pricing.