CSS Bootstrap Navigation with massive logo - html

I have created a navigation with Bootstrap's CSS. It was working great until I added images (logo & award logos). The 3 images I added are 471x249, 251x117 & 275x300 and when I look at the navigation the images are massive. I noticed this line:
.nav>li>a>img {
max-width: none;
}
I tried playing around with the max-width and that just makes it look worse.
Here is the full nav:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a href="#" class="navbar-brand">
<img src="http://2014violadepc.en.ecplaza.net/logo.jpg" />
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Communities
</li>
<li>Pronto
</li>
<li>Gallery
</li>
<li>Virtual Tours
</li>
<li>Design Centre
</li>
<li>Customer Care
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<img src="http://itg-instructor-training.co.uk/Images/images/images/banner_01_01.png" />
</a>
</li>
<li>
<a href="#">
<img src="http://arabbrains.com/wp-content/uploads/2013/03/emc-logo1-275x300.jpg" />
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
Any suggestions to fix this issue with images?

You are trying to assign a max-width property without specifying the height.
Just change this line:
<img src="images/logo.jpg" />
to this
<img class="img-responsive" src="images/logo.jpg" alt="" />
and change those max-width properties you edited earlier back to their original values and it should work fine.
Now the image size will be valued (while maintaining aspect ratio) according to the height of the navbar-header.
---- UPDATE ----
I checked your fiddle and noticed a certain class where you wrote collapse instead of toggled. I have also set a max-height property for your images which you can change accordingly.
Here is a jsfiddle: http://jsfiddle.net/AndrewL32/z08oyjva/

Try setting the width of the images to 100%:
.navbar-brand img {
width: 100%;
}

Related

How to solve navbar-brand logo issue

I added my logo to my navbar, but then something strange happened. Every item in my navbar that contains more than one word, seperated with a space, gets pushed back. See image below:
Current navbar issue
Since I'm not that experienced I tried to search for common fixes for this as I could not see any problems with my code.
I tried display: infline-flex; !important
but without success.
navbar-brand position: absolute; left: 50%;
seems to work, but I can't place it to the left side of the navbar this way
this is what my navbar code looks like:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-md bg-light navbar-light py-3 shift" id="mainNav">
<div class="container">
<a href="#" class="navbar-brand">
<img src="img/jd_full.png" width="20%" alt="logo" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse nav-container" id="navmenu">
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item">
over mij
</li>
<li class="nav-item">
opleiding
</li>
<li class="nav-item">
stage
</li>
<li class="nav-item">
realisaties
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"></script>
I checked for padding on the navbar-brand class, but no results.
Anyone knows a fix for this?
your problem is caused by the width you set, for logos use a fixed size equivalent to the proportion of your navigation bar.
change this <img src="img/jd_full.png" width="20%" alt="logo">
for this other <img src="img/jd_full.png" width="120px" alt="logo">

Bootstrap, how to adapt a logo to the navbar size?

I'm making the navbar of my Website with the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="images/logo.png" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
The problem is that the logo image is big (225x225 pixels), and I would like to set it to the default size of the navbar. But the opposite happens, i.e the navbar adapts to the size of the logo (and becomes very big).
I did not find any feature in bootstrap to do this ? Any idea ?
Thank you
navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. max-height: 40px to it and margin: 5px to center image.
.navbar-header img {
height: 40px;
margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="http://lorempixel.com/225/225" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
I had the same problem sometime back and this is what I did . Hope this works for you
.brand{
max-height: 30px;
}
<a href="link/location/here" class="img-circle">
<img class="brand" src="img/logo.png">
</a>

Bootstrap 3. Add different navbar brand image sizes per screen size

I have a perfectly fine Bootstrap 3 website. Every page contains a navbar-brand class and a normal navbar. I used the navbar-brand class to display a logo on my website. It works fine in the major browsers and on extremely large screen sizes(beamer/projector) and normal desktop/laptop/tablet screen sizes.
The only issue I am having is that the logo does move and resize a little on mobile using the "img-responsive" class, and it is nicely positioned in its parent element, but for my taste it is slightly too big(on mobile sizes, 4.3 and 5.5 inch). It pushes to the upper line of the browser and the bottom line of the navbar. How can I modify my navbar-brand class to display a tad smaller logo for those screen sizes (<7 inch)?
Can I add a media query to my CSS for those screen sizes and add custom width and height attributes? Is there something else I need to do?
I am new to web development and with this part I have no idea what I am doing.
My navbar code:
<div class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html"><img class="img-responsive" alt="Logo" src="images/logo_final.png"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="active" href="index.html">Home</a>
</li>
<li>
An element
<ul class="dropdown">
<li>Some elements</li>
<li>Some elements</li>
</ul>
</li>
<li>
</li>
<li>Some elements</li>
<li>Some elements</li>
<li>Some elements</li>
</ul>
</div>
</div>
</div>
Yeah... Some help would be extremely appreciated.
Thank you in advance
One way is :
Bootply : http://www.bootply.com/J4vixbmovW
Code :
<a class="navbar-brand visible-xs" href="index.html"><img class="img-responsive" alt="Logo xs" src="images/logo_final.png"></a>
<a class="navbar-brand visible-sm" href="index.html"><img class="img-responsive" alt="Logo sm" src="images/logo_final.png"></a>
<a class="navbar-brand visible-md" href="index.html"><img class="img-responsive" alt="Logo md" src="images/logo_final.png"></a>
<a class="navbar-brand visible-lg" href="index.html"><img class="img-responsive" alt="Logo lg" src="images/logo_final.png"></a>
PS :
Look at this classes : visible-[xs|sm|md|lg]
The doc : http://getbootstrap.com/css/#responsive-utilities

Using media queries to target to different navs

I am using Twitter Bootstrap 3 to create this site www.peoplespropertyshop.co.uk as you can see the navigation on larger screens has a jquery effect to drop the boxes down.
My problem was that this was occuring on the small screen too and looked awful. I have create to different nav sections and hidden the animated one through media queries and hidden the other other nav from all other devices.
However for the life of me i cant see why when you click the icon in small screen view it doesn't animate anymore but the list is not appearing either.
<link href="css/styles.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic|Cinzel' rel='stylesheet' type='text/css'>
<link href="css/menu.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/Logo.png" alt="People's Property Shop Logo"></a>
</div>
<!-- Small Screens Nav Bar -->
<div class="navbar-collapse collapse hidden-sm hidden-md hidden-lg smallscreennav visible-xs">
<ul class="nav nav-pills navbar-right hidden-xs">
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Who We Help</li>
<li>News/Events</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
<!-- Larger Screens Nav Bar -->
<div class="navbar-collapse collapse">
<ul class="nav nav-pills navbar-right hidden-xs">
<li class="blue">
Home
<p class="subtext"><img src="images/Home_img.png" alt="home image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
Who We Are
<p class="subtext"><img src="images/whoweare_img.png" alt="who we are image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
What We Do
<p class="subtext"><img src="images/whatwedo_img.png" alt="what we do image" style="margin-top: -8%;"></p>
</li>
<li class="blue">
Who We Help
<p class="subtext"><img src="images/whowehelp_img.png" alt="who we help image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
News/Events
<p class="subtext"><img src="images/new_img.png" alt="news image" style="margin-top: -10%;"></p>
</li>
<li class="blue">
Contact
<p class="subtext"><img src="images/contact_img.png" alt="contact image" style="margin-top: -8%;"></p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
In my opinion you don't need an extra div, you can change your div with mediaqueries
#divMenu{
/* do something when it is normal */
max-width:1000px;
}
#media all and (min-width: 333px) and (max-width: 960px){
#divMenu{
/* do something when it's too small */
max-width:800px;
}
}

Bootstrap navbar height changed on inserting brand image

I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
Here is my attempt at getting a Navbar with transparency and fixed to the top.
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" />
<button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li> <h5> Discover </h5>
</li>
<li> <h5> Blog </h5>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li> <h6> Login </h6>
</li>
<li> <h6> Signup </h6>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
There are a few things affecting the height of the navbar:
div class="navbar-inner" (5px padding)
img class="brand" (10px padding)
the size of the image
You can remove the padding by:
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
div.navbar-inner {
height: 10px;
}
Use something like this:
.brand {height: 25px;}
Demo: Fiddle