6

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;
 }
1
  • Just to clarify, are you wanting the collapse button to be on the right when it's in 'mobile view'? Also with the first part of your question, are you asking how to make the menu items bigger or the logo smaller?
    – Clint
    Commented Jul 29, 2015 at 5:33

2 Answers 2

2

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.

3
  • How can i make the jumbotron fit the exact size of the image ?Image size is 1400 x 562
    – BDS
    Commented Jul 29, 2015 at 19:21
  • @BDS I've updated my answer to cover off how you can make sure the collapse button isn't above the logo and that the navbar sits outside the jumbotron. Were there any other issues?
    – Clint
    Commented Jul 30, 2015 at 1:36
  • you have been helpful. I need my website to look something like this threeguys.us/works/2_Website.jpg .Like the header has to be in the center of the image
    – BDS
    Commented Jul 30, 2015 at 20:22
1

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.

2
  • I want the logo and navbar in the screen of the jumbootron.Some thing like this threeguys.us/works/2_Website.jpg
    – BDS
    Commented Jul 29, 2015 at 17:59
  • All you have done there is added the standard bootstrap nav without accounting for the stylesheet that @BDS included in his answer. What you have proposed would not fix the issue of the collapse button being above the logo in mobile view.
    – Clint
    Commented Jul 30, 2015 at 1:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.