0

Edit #1: After I give my height a definition of 89px, my mobile menu seems to go behind my content.

enter image description here

I'm having an issue with the mobile version of my navbar. The navbar isn't as tall as logo, so when I click on it my "Home" menu item isn't being shown unless I hover over it.

Here's the pictures for both issues:

enter image description here

enter image description here

Here's my HTML:

<nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <div class="row"> <div class="navbar-header"> <a class="navbar-brand " style="margin-top: -15px; float: left;" href="#"> <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png"> </a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Internet</a></li> <li><a href="#">Phone</a></li> <li><a href="#">Android TV</a></li> <li><a href="#">Shaw Direct</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </div> </nav>

And here's my CSS:

.navbar-default { background-color: #00AEFE; } .nav.navbar-nav li a { color: white; font-size: 18px; line-height: 50px; } .col-xs-0 { display: none; } nav { height: 89px; }
Improve this question
11
  • 1
    the css you gave is not showing any issue. it is not enough. Add full css Commented Dec 29, 2016 at 15:22
  • What are you trying to achieve? Commented Dec 29, 2016 at 15:25
  • @kittyCat At the moment, that is my only CSS. Commented Dec 29, 2016 at 15:25
  • @ManuelObregozo I'm trying to make my navbar height (the blue part) as tall as my logo. Commented Dec 29, 2016 at 15:25
  • This is a mobile-only issue. Commented Dec 29, 2016 at 15:26

2 Answers 2

Reset to default
1

In Bootstrap navbar-brand has some padding, also the height of <img> should be controlled by additional CSS like navbar-brand img {height:40px}.

Although if we could see your live HTML, it would be nice.

EDITED

use this CSS to give some height longer than the height of your image like 100px or higher

@media (min-width: 768px) { .navbar-header { height: 100px; } }

OR If you don't want to change the height of navbar-header you can add some padding to navbar-toggle button so it will add the height of navbar-header:

@media (min-width: 768px) { .navbar-toggle { padding: 33px 10px; } }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

there is no logo picture in this example beacuse it has localy addressed. so tell me how much is height of your logo picture? if it is longer than 50px then you should minimise it to around 40px
It's a 300x89 picture.
and does it have to be same size in your site?
Yes, it does have the same size.
Please check the Edited answer
0 
<a class="navbar-brand " style="margin-top: -15px; float: left;height:auto" href="#"> <img alt="Brand" class="pull-left" style="margin-left: -15px;" src="Images/logo-resized.png"> </a>

Change the height of navbar-brand class

OR

 <style> .navbar-brand img { max-height: 40px; width: auto; } </style>
Improve this answer

2 Comments

But wouldn't that just make the image smaller, and distorted?
you can set max-height css of image and width auto

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.