How do i make my logo fit in my nav bar? - html

I have a big transparent logo and i placed it in place of the old logo that came with the theme i downloaded but it doesn't scale according to the navigation bar
I can reduce the size of the logo in photoshop but i feel like that's not the best way to fix this issue
Here's the code i have for the logo
<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a></div>
How do i fix the logo so it fits inside of my nav bar..
Here's my entire nav bar html
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Logo -->
<a class="navbar-brand" href="./index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a>
</div>
<!-- Navmenu -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home.
</li>
<li class="dropdown">
Menus.
<ul class="dropdown-menu" role="menu">
<li>All Day Breakfast</li>
<li>Lunch</li>
<li>Children's Menu</li>
<li>Coffee and Cakes</li>
</ul>
</li>
<li>
Location.
</li>
<li>
Catering.
</li>
<li>
About.
</li>
<li>Contact.</li>
</ul>
</div>
</div>
</nav>

In general, whenever you're playing around with the fitting of an image, these are the four CSS attributes you're looking for.
.img-responsive {
height: auto;
width: auto;
max-height: 72px;
max-width: 250px;
}
In my snippet, we're telling the image to automatically size itself. <img> tags will try to retain aspect ratio unless explicitly instructed otherwise. The two max- attributes dictate the largest dimensions we want. If we upload an image that's 300px wide and 72px tall, for instance, it will end up smaller than our maximum height and at 250px wide.
To vertically center the image, you'll want to do this:
line-height: 72px; /* whatever the fixed height of the bar is */
vertical-align: middle;
If your image is the exact height of the navbar, try using vertical-align: top if that looks off.

Related

Trouble scaling down responsive logo image on navbar with Bootstrap

I am building a travel website with Bootstrap Studio -> http://stackoverflowquestion.bss.design/
It's going well so far, except for one issue: when reducing the screen size, while the logo does decrease in size, it takes up the whole navbar and pushes the burger menu down.
Now, my initial instinct is to remove img-responsive and manually enter #media queries in the CSS so that the image is the perfect size for every screen type. However I'm pretty sure that this is not the best or most efficient way of solving the issue.
Here is my nav HTML:
<nav class="navbar navbar-default navbar-fixed-top navbar-fixed-top transparent">
<div class="container-fluid">
<div class="navbar-header">
<img src="Logo_SmallCompass.png" height="100px" class="img-responsive" id="logo" />
<button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right" id="right-links">
<li role="presentation">hello </li>
<li role="presentation">test </li>
<li role="presentation">bye </li>
<li role="presentation">about </li>
<li role="presentation">Contact </li>
</ul>
</div>
</div>
Any help or advice is greatly appreciated!
Many thanks in advance
Just add 1 media query like this:
#media (max-width: 600px) {
a.navbar-brand.navbar-link {
width: 80%;
}
}
This will make sure that the hamburger will stay at the top right.

bootstrap 4 change navbar height causing navbar items to not be vertically centered

I have a bootstrap 4 navbar like this:
<nav class="navbar navbar-light bg-faded navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Toggle Button -->
<button type="button" class="navbar-toggler hidden-md-up"
data-toggle="collapse"
data-target="#nav-content"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">THE VEGAN REPOSITORY</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-toggleable-md" id="nav-content">
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
ABOUT
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#home_page_footer">
<h5 class=" nav-item clickable white-text medium-text
right-text">
BLOG
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 class=" nav-item clickable white-text medium-text
right-text">
LOGIN
</h5>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.w3schools.com">
<h5 id=" sign-in-button" class="nav-item clickable
medium-text right-text">
SIGN UP FREE
</h5>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-light bg-faded">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
</button>
</nav>
I'd like to change the height of the navbar, but when I do, the links are no longer vertically centred.
70px
I have tried line-height, and flexbox options such as
nav {
background-color: $brand-red;
height:70px;
display: flex;
align-items: center;
}
which does:
my only css used for the whole navbar is this:
nav {
background-color: #fc4747;
height: 70px;
display: flex;
align-items: center; }
How do I vertically centre the navbar items if the navbar is 70px tall? The default height of a navbar is a bit smaller, around 50px.
So I figured I would address a few things here but first as to your question. If you just want to change the height of the navbar instead of adding a specific height to the nav you could just add extra padding to the navbar to give you your desired height and then you wouldn't have to change a bunch of css throughout the rest of the navbar. So doing this should give the navbar a height of 70px.
.navbar{padding:1rem}
Here is a fiddle of everything I address in this post in action Fiddle Demo
In this fiddle demo I have also added some responsive styles for stacking the navbar links at your collapse width.
Next If you are going to set a background color to the nav there is no reason to use the bg-faded class to the nav as this just gives you the background color for the nav so you can remove that class from your nav.
Then I see in your classes for your nav links you have a white-text class. If you want white text for your navbar your can just use the class of navbar-dark and this will give you lighter text for the navbar instead of using navbar-light. Just figured I would point that out.
Next In bootstrap 4 there is no navbar-header class so this is not necessary unless you are planning on custom styling something here. And the navbar-toggler button is different in bootstrap 4 there are no icon-bar spans they just use the html code for this now ☰
Note: Addressing a huge pet peeve of mine you have h5 tags in your navbar. Not sure why this is but I see people doing this a lot. H tags are supposed to be used in order from h1 down to h6 and are supposed to be directly related to the page that you are on and not for the entire site. If you have a good reason for this practice then by all means keep them there but I am not sure why I see people do this all of the time. To me it is a bad practice just figured I would address this.

Add a quote Button to bootstrap Navigation Bar and Make it stay Permanently?

I would like:
1. The Free Quote Button to be forced right
2. At small screensizes I would like free quote button to remain to the right of the (icon bar button [mobile menu])
3. I don't want the navigation bar to take up an extra line when at smaller screen size
Fiddle:
http://jsfiddle.net/z7V4F/
HTML:
<!-- Nav bar -->
<nav class="navbar navbar-inverse navbar-fixed-top navi-style" role="navigation">
<!-- quote button-->
<!--Free Quote-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand menulogo" href="#">
My Site + Logo Makes This Long
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>-->
<li class="dropdown"> Info Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<li class="dropdown"> contact Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<li class="dropdown"> about Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<li class="dropdown"> More Tab<b class="caret"></b>
<ul class="dropdown-menu">
<li>Overview
</li>
</ul>
</li>
<div class="navbar-right"> Free Quote
</div>
</ul>
</div>
</nav>
1. The Free Quote Button to be forced right
I would use position: absolute; here to avoid excessive juggling with margins and paddings. This way it will always stay on the same line. This will look worse if your navbar-header and nav items are wider though than in your fiddle.
.navbar-right {
position: absolute;
right: 0;
}
2. At small screensizes I would like free quote button to remain to the right of the (icon bar button [mobile menu])
Put another <button> above the navbar-toggle with pull-right and visible-xs classes. This will place the button on the right side of the navbar-toggle and make it visible only on XS screen sizes.
<div class="pull-right visible-xs free-quote">Free Quote</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand menulogo" href="#">
My Site + Logo Makes This Long
</a>
Give hidden-xs class to the other button so It won't show up in XS screen sizes. (example in answer to number 3)
3. I don't want the navigation bar to take up an extra line when at smaller screen size
You can show smaller button on SM screen sizes to avoid the need for navbar to expand on two lines like this (by need I mean otherwise it is more likely that navigation items and the button will overlap each other):
<div class="navbar-right hidden-xs free-quote">
Free Quote
Free Quote
</div>
I would suggest that you show logo or text only in navbar-brand on XS screen sizes so that they won't jump to their own line when the screen size is only e.g. 320px wide.
4. Extra: Make it look nice
Give some padding and margin to those buttons to align them nicely.
.free-quote {
padding: 9px 5px 9px 0
}
.free-quote > .btn-xs {
margin-top: 4px;
}
Here is the fiddle: http://jsfiddle.net/z7V4F/3/
You need to have two buttons.
One within the navbar-header and one outside.
The button within the navbar-header should only be visible at the extra small screens, as everything not within navbar-header is hidden at xs.
Everything within navbar-collapse will be hidden (become a mobile menu) at extra small sizes.
Html:
<div class="menuquote navbar-right hidden-xs"> Free Quote
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand menulogo" href="#">
My Site + Logo Makes This Long
</a>
<div class="menuquote navbar-right pull-right hidden-sm hidden-md hidden-lg"> Free Quote
</div>
</div>
http://jsfiddle.net/4nmzh/
To get the button to be forced left and to appear to the right of the mobile menu toggle, put this div:
<div class="navbar-right">
Free Quote
</div>
just before the navbar-header and change navbar-right to pull-right
This takes the button out of the navbar formatting and forces the button to the right as pull-right is bootstrap's float: right class.
To stop your navbar going on to two lines at very small screen sizes your options are:
Set a min-width on your <nav class="navbar">
.navbar {
min-width: 470px;
}
(see this demo)
Shrinking the size of your logo/text in your <a class="navbar-brand"> at small screen sizes using media queries e.g.:
#media (max-width: 500px) {
navbar-brand {
...
}
}
When your navbar is larger I have reduced the padding on the list items to make them stay on one line:
ul.nav li a {
padding-left: 8px;
padding-right: 8px;
}
This Demo should at least give you a starting point.
Hi you can move free quotes outside the tag and add absolute position to it
look at the fiddle: http://jsfiddle.net/z7V4F/4/
As I said i moved div containing free quotes outside navbar-collapse and added next css.
.custum-free-quotes{
position:absolute;
right:0;
top: 0;
}
.navbar{
position relative;
}

Adding transparent (through text and navbar) text to navbar

I'm working on building a website with bootstrap, and I have a navbar fixed to the top of the window. I'm trying to make the abbreviated logo (BLM) on the left of the bar transparent through the letters and the navbar (so that whatever is on the page can be seen through the letters).
Anyone know what css (or html) needs to be added to do this?
Below is my navbar code:
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BLM</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
The Team <span class="caret"></span></li>
<ul class="dropdown-menu" role="menu">
<li>PersonA</li>
<li>PersonB</li>
<li>PersonC</li>
<li>PersonD</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
The part I'm talking about making transparent through to the page is
<a class="navbar-brand" href="#">BLM</a>
I can use CSS to make the navbar-brand transparent, but then it's just black because the navbar is black (and I don't want the navbar to be transparent).
In this example, I want to be able to see the red wall through the BLM letters
Thanks for any help/thoughts!!
Unfortunately, there is no CSS feature (yet) that does what you want it to do while being cross-browser compatible. However, the solution to your problem is easy.
Replace your logo with a .png with transparent letters and a semi-transparent background that matches the rest of the navbar. Shuffle around your divs so that your logo and the rest of the navbar are separate elements, and you're done!
Try opacity and a value of a decimal.
.navbar-brand {
opacity: 0.5;
}

Bootstrap Image Resize

Ok, So I am creating a website with Bootstrap and I have run into an issue. I have placed an image in the nav bar in the logo and then I go to resize the browser to force mobile layout. When I get to where the image should start re-sizing, it drops below (or above) the menu toggle before re-sizing.
I have even tried adding .img-responsive to it but that is no help.
Here is an image of what I am talking about:
And here is my code:
<div class="navbar navbar-inverse navbar-fixed-top">
<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="#"><img src="http://lorempixel.com/300/40/" class="img-responsive" alt="LOGO"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
Any help would be appreciated
Thanks.
There are several ways to solve this. You can use media queries to set max-width or percentage width to .navbar-brand.
The clearest solution might be to use CSS3 calc to make it take 100% width minus the space that the menu button is taking (22px width + 20px of padding + 2px of border + 15px of margin = 59px total space). And because your image is pushed down at 390px screen width, your media query should be:
#media (max-width: 390px) {
.navbar-brand {
width: calc(100% - 59px);
}
}
Check the JSFiddle with the result.
My other answer might help you as well.