4
Add an image to Bootstrap Navbar Links
source link: https://www.codesd.com/item/add-an-image-to-bootstrap-navbar-links.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Add an image to Bootstrap Navbar Links
advertisements
I want to add a small avatar next to a link in my bootstrap navbar like this:
I am trying to add my image inside the <a> tags of the link, but this is pushing the link out of line with the other links, because the image is taller than the text of the links.
Here is my HTML
<li><a href="link">
<img class="hidden-xs" src="img">
MIKE
</a>
</li>
Is there a proper way to easily add images to bootstrap nav-bars so that all the links still remain in line?
Here's @press' fiddle with the line height changed. You can obviously tweek around padding etc.. to your likes http://jsfiddle.net/c6f1ecrv/4/
.navbar-nav li a {
line-height:3em;
padding:5px 10px;
}
Related Articles
Float Bootstrap navbar links to the left on the mobile and on the desktop
My navbar has 4 links all floating to the right. I used .pull-right to make it work. On mobile, I would like every link to move to the left except for my active link. I want my active link to stay right on all devices. I'm trying to find the most eff
The Bootstrap navbar link does not work
I have a navbar where I show different logos depending on the size of the screen. This is how the html for it looks like: <nav class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <!-- Bra
Broken Bootstrap Navbar Links
On mobile (iOS using Safari and Google Chrome), lightly tapping without clicking a navbar item changes its color from gray to black (the behavior you get with :hover on desktop). This only happens with some of the items, however, and only if navbar-f
How do I add the image to the bootstrap popover?
I am trying to add the image to the bootstrap popover, but i am not able to get the image.instead it is showing the html.how can i solve this? <img class="filter-icon" src="images/filter-icon.png" class="filter-icon" data-
How to add an image to an asp.net link button programmatically
I have an ASP.NET link button that I need to add both text and an image to I thought I would be able to just add the image to the button using Controls.Add but no dice. Here is what I have so far: foreach (var entity in metadata.Meta.Where(e => e.Rep
navbar bootstrap active link
I have a bootstrap navbar and I want that the links get active pending which subdomain I am with Javascript. I researched all round the forum and I didn't found anything that worked. Help me please. <nav class='navbar navbar-default'> <div class=
Add an image to a link based on its content
I have a system that generated links to different parts of the application. I need to append an image next to the link based on its context. In CSS I would do it like this: a { color:#FF6600; padding-right:50px; background-image: url('images/system.p
How to make Twitter Bootstrap Navbar transparent?
I am trying to make my bootstrap navbar transparent. I am using bootstrap navbar-inverse and trying to add opacity by rgba(). I want my navbar to be transparent as shown in the image below: @font-face { font-family: FuturaBook; src: url('fonts/Futura
Bootstrap navbar transparent
For some reason I cannot get the navbar to change. I tried to make it transparent. I know bootstrap navbar is normally an image so I included background-image: none. <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="
Responsive Bootstrap Navbar
I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble. I have searched Stack overflow looking
bootstrap navbar collapses social icons on top of each other
I want a navbar that has a collapsible element on the right that holds my social media links and icons. Trouble is, the bootstrap navbar does not seem to be working: https://jsfiddle.net/44mbr237/1/ When the browser window is collapsed, the social me
Bootstrap navbar search icon
The bootstrap examples for the navbar search form have just a text box. I'd like to be able to add a search icon at the beginning, like Twitter does on their search box. How can I do this with bootstrap? Here's what I've tried so far but it's failing
Problem Bootstrap Navbar css
I have a bootstrap navbar with some custom code to be able to use 2nd level submenus. The issue I'm having is when I click Menu Item 1, then sub 1(or sub 2) to open a 2nd level submenu, the li item containing sub 1 or sub 2 shows a white background w
Add the image of the icon to the css class for the html elements
I need to add icon image to HTML elements like this in case of font awesome and bootstrap. Like this for example I need to associate icon image with css class. Let say class name is ico and if I do something like this <a href="#" class="
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK