I have some issues with icon images in navigation bar, I tried to set these icons in correct positions besides each label. If you find web label is very closed to computer monitor icon, I try to change padding top and bottom except left and right but doesn't work that way.
http://i58.tinypic.com/e5i7p4.jpg
<nav id="sideMenu" role="navigation">
<ul id="MainNav" class="nav-bar">
<li><a class="icon" href="#web"><img src= "img/web.svg">Web</a></li>
<li><a class="icon" href="#articles"><img src= "img/articles.svg">Articles</a></li>
<li><a class="icon" href="#about"><img src= "img/about.svg">About</a></li>
<li><a class="icon" href="#contact"><img src= "img/contact.svg">Contact</a></li>
</ul>
</nav>
.icon img {
height: 30px;
width: 30px;
padding-left: -0.2rem;
padding-right: 0.8rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
anyone please?
Try to use margin. Padding is for text. You can try this -
.icon img {
height: 30px;
width: 30px;
margin: 3px 0px 0px -6px;
}
Related
Twitter Bootstrap 3.3.7
I have the following two navs:
<nav class="navbar navbar-default navbar-fixed-top" id="topNavBar">
<div class="container-fluid"></div>
</nav>
<nav class="navbar navbar-default navbar-lower" role="navigation" data-spy="affix" data-offset-top="50" data-offset-bottom="80">
<div class="container container-navbar">
<div class="row take-test-heading">
<asp:Label ID="lblTakeTestTitle" runat="server" Text="Take Text Title Here...."></asp:Label>
<asp:Label ID="lblTakeTestTimeRemaining" runat="server" Text="00:00"></asp:Label>
<i class="fa fa-bars pull-right"></i>
</div>
<div class="row take-test-heading-two">
</div>
</div>
</nav>
with the following CSS:
body {
margin-top: 50px;
padding-top: 0px !important;
}
.container-navbar {
}
.take-test-heading {
background-color: rgb(51, 122, 183);
height: 20px;
color: white;
font-size: 18px;
font-weight: 700;
margin-left: 10px;
margin-right: 20px;
margin-top: 5px;
}
.navbar-lower {
z-index: 999;
}
which gives me the following when the page is first rendered:
and then as I scroll (note the top affix):
I have a couple of issues that no matter what CSS changes I make I cannot seem to solve:
I want the blue bar "Take Text Title..." to be 100% and occupy the entire width of the viewport (yellow areas)
When scroll spy kicks in the navbar goes to 1170px (!) and is no longer full width (see green area). I want it to be full width all the time.
Cam someone please point me in the right direction here?
In bootstrap 3 .container has 15px of padding-left and padding-right. You can set both to 0px; manually.
Also setting margin-left and margin-right to 0px will do the trick
.take-test-heading {
background-color: rgb(51, 122, 183);
height: 20px;
color: white;
font-size: 18px;
font-weight: 700;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
}
I have problems scaling a svg in Internet Explorer 10-11. It works in other browsers.
Html:
<ul>
<li>English <img src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg" alt=""></li>
</ul>
CSS:
li img {
width: 19px;
height: 13px;
}
How can I scale the image so that it fits to the desired width in IE10+11?
See this fiddle.
You can put your image in a container and specify width and height on this container.
HTML
<ul>
<li>
<a href="#">
English
<div class="img-container">
<img src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg" alt="">
</div>
</a>
</li>
</ul>
CSS
li .img-container {
width: 19px;
height: 14px;
}
li img {
max-width: 100%;
max-height: 100%;
display: block;
outline: none;
border: none;
}
https://jsfiddle.net/6e47sxhg/5/
Working on this site:
https://voyagers.wildapricot.org/
Trying to get the font awesome arrow to the right of the menu nav items (which indicates there are sub-pages) to show up immediately to the right of the text instead of with a giant space in between text and arrow.
Would appreciate any help, thank you!
Technically, this is how you would do it:
Step 1: in the following CSS rule, change the display value to inline-block.
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
display: inline-block;
text-decoration: none;
text-align: center;
vertical-align: top;
white-space: nowrap;
position: relative;
font: normal 18px/26px Oswald, Helvetica, sans-serif;
overflow: hidden;
}
Step 2: In the following rule, change the right-padding to 15px (the second value in the padding rule).
.WaGadgetMenuHorizontal.menuStyle004 .menuInner ul.firstLevel > li > .item > a > span {
padding: 15px 15px 15px 10px;
...
}
Step 3: In the following, change the right offset to 0 (or equivalently 0px).
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.dir > .item > a::after {
content: "\f107";
font-family: FontAwesome;
color: white;
position: absolute;
display: inline-block;
top: 15px;
right: 0px;
}
I am assuming that you have access to all the CSS stylesheets in your content management system (web builder platform).
If not, you need to add these rules to override the pre-existing rules, so you need to learn how to do that first. You may need to get help from the tech support people where you are hosting.
Note: I went to your website using Firefox and I inspected the various elements and tried out these three steps and that did the trick. Make sure
to check out the other major browsers (Chrome and IE).
Keep in mind that these changes will change the overall look of the navigation so you may have other visual side effects that may not be suitable for your design.
Aside: the HTML in questions looks like the following (I omitted a few wrapping div's):
<ul style="" class="firstLevel">
<li class="sel">
<div class="item"><span>Home</span></div>
</li>
<li class="">
<div class="item"> <span>Coop</span> </div>
</li>
<li class="dir">
<div class="item"><span>Resource Center</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"><span>Home (Demo)</span></div>
</li>
</ul>
</div>
</li>
<li class="">
<div class="item"> <span>Events</span> </div>
</li>
<li class="dir">
<div class="item"> <span>About Us</span>
<ul class="secondLevel">
<li class=" ">
<div class="item"> <span>Donate</span> </div>
</li>
</ul>
</div>
</li>
<li class="last-child">
<div class="item"> <span>Volunteer</span> </div>
</li>
</ul>
i restructured so that it works but you have to adapt it to your case
.dir {
height: 40px;
width: 100%;
}
.item {
width: inherit;
height: inherit;
}
a {
background: blue;
height: 100%;
width: 100%;
position: relative;
display: block;
}
a:hover {
background: red;
cursor: pointer;
}
span {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
span:after {
content:"<";
position: absolute;
right: -20px;
}
<li class="dir">
<div class="item">
<a href="https://voyagers.wildapricot.org/Resource-Center" title="Resource Center">
<span>Resource Center</span>
</a>
</div>
</li>
I am trying to get an image to float beside of an unordered list.
I have the following HTML:
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-1"><img id="droid-logo" alt="" src="/templates/notthedroidyouarelookingfor/images/ntdyalf-logo.png"></div>
<div class="col-md-2"><ul class="nav menu nav-pills">
<li class="item-101 current active">Home</li>
<li class="item-102">About</li>
<li class="item-106">Contact Us</li>
<li class="item-114">Troubleshooting</li></ul>
</div>
</div>
</div>
</header>
And my CSS:
droid-logo {
float: left;
height: 20%;
margin: 10px;
width: 20%; }
header ul.menu {
border-radius: 4px 4px 0 0;
display: block;
float: right;
margin: 0 10px;
padding: 0;
text-align: left;
width: 70%; }
The actual website is here:
http://notthedroidyouarelookingfor.com/
I don't understand why the image is below the menu.
the <ul class="nav menu nav-pills"> has the css property position: absolute;.
This prevents the menu to float.
Try to make the position relative and then try again with float (maybe you have to float the menu left).
Let me just say before I ask this question ..I did try searching for a long time through existing topics but I can't find a working solution to my problem.
I am using Bootstrap and have a horizontal list of items with icons and a text link underneath. What I want is basically the entire div clickable as the link, not just the actual text.
Here is the HTML:
<ul class="glyphs character-mapping">
<li>
<div data-icon="a" class="icon"></div>
Link 1
</li>
<li>
<div data-icon="b" class="icon"></div>
Link 2
</li>
</ul>
And the CSS:
.glyphs.character-mapping {
margin: 0px;
padding: 0px;
color: #000000;
}
.glyphs.character-mapping li {
margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;
}
.glyphs.character-mapping .icon {
margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #FF0000;
overflow: hidden;
border-radius: 3px;
font-size: 68px;
}
I tried several solutions that are related on here, including giving no padding or margin to the 'li' and instead making the 'a' 100% wide and high, but that didn't work either.
Any ideas what I'm doing wrong here?
Thank you so much in advance for any help.
Can't you just do this:
<ul class="glyphs character-mapping">
<li>
<a href="">
<div data-icon="a" class="icon"></div>
Link 1
</a>
</li>
<li>
<a href="">
<div data-icon="b" class="icon"></div>
Link 2
</a>
</li>
</ul>
Where the entire div and text is clickable?