I have a html page which has a logo on the top:
default logo
After I resized my logo with the same size and kept it over there, its not appearing:
current status
The code for logo is the following
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="logo">
<div class="relative-logo">
<img src="assets/images/logo" alt="logo">
</div>
</div>
<div class="container">
<div class="navbar-header">
<div class="responsive-logo visible-xs">
<img src="assets/images/logo-mobile.png" alt="">
</div>
The logo is appearing in mobile mode when I did the same with the mobile logo resizing. Can anyone tell me why my logo is not appearing in desktop mode?
You forgot the file-extension (.png, .jpg etc.) in the src of the <img>. Change
<img src="assets/images/logo" alt="logo">
to
<img src="assets/images/logo.png" alt="logo">
Here is the full code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="logo">
<div class="relative-logo">
<img src="assets/images/logo.png" alt="logo">
</div>
</div>
<div class="container">
<div class="navbar-header">
<div class="responsive-logo visible-xs">
<img src="assets/images/logo-mobile.png" alt="">
</div>
</div>
Try to add a / at the top of src: "/"
This is for absolute path.
Example <img src="/image.png"/> --> http://www.something.com/image.png
Example 2 <img src="/folder/image.png"/> --> http://www.something.com/folder/image.png
Related
I am working on a top banner with Bootstrap and my condensed menu always is wrapping to a new line for 1024x768. This is working well for resolution greater than 1024x768. Please advise in correcting my html so that the banner stays fixed on the top for 1024x768 resolution.
The banner text has to be centered, the logo should be on the left and logged in user name should be on the right.
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
<div class="navbar-header navbar-brand">
Application Title on Banner Goes Here
</div>
<div class="navbar-nav nav navbar-right">
<button class="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name">
Welcome loggedInUser
</span>
</button>
</div>
</div>
Does this look good to you?
.headerBackGroundColor {
background-color: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top headerBackGroundColor">
<div class="container">
<div class="row w-100 justify-content-md-around row-cols-3">
<div class="col-lg-auto">
<div class="logo">
<a href="">
<img src="https://via.placeholder.com/100" alt="Title" />
</a>
</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div>Application Title on Banner Goes Here</div>
</div>
<div class="col-lg-auto d-flex align-items-center">
<div class="navbar-nav nav navbar-right">
<buttonclass="btn btn-default" type="button" style="cursor:default !important;">
<span class="user-name"> Welcome loggedInUser </span>
</button>
</div>
</div>
</div>
</div>
</div>
I want to add two logos to my bootstrap navbar, but I also want them to be responsive (i.e. I want them to get smaller, not stacked when I decrease the screen size). Here's the navbar code I have been working on-
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" src="img/image.png">
</a>
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="img/image2.png">
</a>
</div>
</div>
</nav>
Any help would be greatly appreciated!
I have created the example of having two logo side by side.
Please check the working example at CODEPEN
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav-header">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="http://www.kratosuk.com/wp-content/uploads/2013/07/joomla-logo.png" class="img img-responsive">
</a>
</div>
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" class="img img-responsive" src="http://www.kratosuk.com/wp-content/uploads/2013/07/drupal-logo.png">
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
CSS:
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
I hope it helps you
Enjoy :)
The 'img-reponsive' class should help you.
<img alt="Brand" id="brand1" src="img/image.png" class="img-responsive">
Hope it helped you :)
I would like to position my image inside the navbar and my name on the right of the image. Here's my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
You can use Flexbox on .navbar-brand and reduce padding a little bit
.navbar-default .navbar-brand {
display: flex;
align-items: center;
padding: 5px;
}
.navbar-brand img {
height: 100%;
margin-right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
I have a solution without flex. You just need to setup some attributes for .navbar-brand and .navbar-brand>img.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-brand {
height: auto;
}
.navbar-brand>img {
display: inline-block;
padding-right: 10px;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
Why not use a media object here?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">
</a>
</div>
<div class="media-body media-middle">
<h4 class="media-heading">Luckycharm-boy</h4>
</div>
</div>
</div>
</div>
</nav>
An another way which I prefer is - create a whole "row" div in full nav bar without nav-header , then you can fully control the positioning of img and text location in various screen sizes for mobile as well as large screens. Then you can give various col (columns) sizes and write in that .
I am saying this as it will help you to place it in any location
Easy fix would be using span. Check this out. DEMO here.
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-logo" href="#">
<span><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"/></span>
luckycharm-boy
</a>
</div>
</nav>
CSS:
a.navbar-logo {
color: #666666;
}
social networking logo must appear horizontally not vertically. social networking logos should appear on right horizontally and company's name and logo must appear on left
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class='col-md-12-fluid' style="
background-color:#9E9E9E;
">
<div class='col-md-8-fluid'>
</div>
<div class='col-md-4-fluid'style="
margin-top: 3px;">
<a><img height="180px" src="images/facebook.png" class="img-responsive"/></a>
<a><img height="180px" src="images/twitter.png" class="img-responsive"/></a>
<a><img height="180px" src="images/google.png" class="img-responsive"/></a>
<a><img height="180px" src="images/pinterest.png" class="img-responsive"/></a>
</div></div>
<div class='clearfix'> </div>
<div class="navbar-header">
add your ul element class "navbar-right"
I need to have the logo as a link to the ideas page (Which is the home page) in HTML and CSS3 this is what I have. What do I need to add please?
<body>
<header>
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
<div id="navigation_container">
<!-- the body -->
<div class="rectangle">
<!-- the navigation links -->
<ul id="navigation">
<li>✭ IDEAS</li>
<li>✭ WORKSHOP</li>
<li>✭ TIPS</li>
<li>✭ DIGITAL PAPER</li>
</ul>
<!-- end the body -->
</div>
<img id="logo" src="Photos/logo.jpg" alt="My logo">
update your html like the below
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
You write your code should be like this
<div id="logo">
<a href="">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</a>
</div>