Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

have some issues with my bootstrap and css

I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button . Preview of the website (http://threeguys.us/works/testing.html)

testing.html

<div class="jumbotron">
<div class="container">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
                </div>

                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Rates</a></li>
                        <li><a href="#">Employee</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="call_button">
             <button type="button" class="btn btn-default">call us</button>
        </div>
        </div>
        </div><!--jumbotron end-->

style.css

 .jumbotron
 {
  text-align: center;
  background-size: cover;
  background-image: url(images/car/car.png);
 }
 .container
 {
  padding:0px;
 }
 .navbar
 {
   height: 60px;
   background-color: transparent;
   border:0px;
   padding-top: 0px;
  }
  .navbar-header
  {
   width:70px;
   background-color: transparent;
  }
  ul
  {
   padding:0;
  }
 .call_button
  {
  margin-top : 428px;
  }
  .content
  {
  background-color: white;
  padding-top:0px;
  }
  .footer-nav
  {
  text-align: center;
  }
  .text_order
  {
  background-image: url(images/text_order/rectangle.jpg);
  text-align: center;
  padding: 5px;
  }
  .text_order p
  {
  font-size: 20px;
  }
 .footer-nav li
 {
 display: inline;
 } 
 .footer-nav li a
 {
 padding-left: 50px;
 text-decoration: none;
 color: #f7ab00;
 }
 .footer-nav li a:hover
 {
 color:black;
 }
like image 780
BDS Avatar asked Jul 29 '15 01:07

BDS


People also ask

Why is CSS not working with Bootstrap?

These are the possible reasons: You have a wrong or incorrect link to the bootstrap file. browser caching and history is messing with your html. Other CSS files are overriding the bootstrap file.

Can you use both CSS and Bootstrap together?

Yes. You will want to put your additions in a separate file and link it below the bootstrap. css link. Then you can add your own classes and/or overwrite the Bootstrap classes in your own file.

What is the problem with Bootstrap?

While Bootstrap is easy to use, it's not so easy to customize as you might think. Some components will require you to use ! important several times, which is not ideal when creating CSS. And having to override the default styles of Bootstrap is just like having to create your own CSS from start.

How do I resolve Bootstrap conflict?

If that is the case, the conflict comes from the WordPress theme you are using. This conflict comes from Bootstrap javascript files loaded twice. To fix that conflict, you will need to either disable all Bootstrap JS loaded by your theme, or disable those loaded by WP Customer Area.


2 Answers

Based on your question, comments and screenshots here are the following recommendations:

Remove this CSS code from style.css so collapse button is on the right (and not above the logo):

.navbar-header {
    width:70px;
    background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}

To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:

Update testing.html to the following:

    <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
                    </div>

                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Rates</a></li>
                            <li><a href="#">Employee</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                </div>
    </nav>
    <div class="jumbotron">
        <div class="container">      
            <div class="call_button">
                 <button type="button" class="btn btn-default">call us</button>
            </div>
            </div>
</div><!--jumbotron end-->

Update your style.css jumbotron class and navbar class to the following:

.jumbotron {
    text-align: center;
    background-size: cover;
    background-image: url(images/car/car.png);
    margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
    height: 60px;
    background-color: transparent;
    border: 0px;
    padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}

If I haven't answered all your questions please comment below so I can update my answer.

like image 139
Clint Avatar answered Oct 10 '22 10:10

Clint


Modify the flow of your HTML. Avoid putting nav inside .container. Use a structure like this

This will put the logo inside the header as well as put it before the collapse button in mobile view.

like image 44
Siddharth Thevaril Avatar answered Oct 10 '22 12:10

Siddharth Thevaril