I'm new to web programming, and I'm having an annoying problem with HTML images alignment... I can't understand why images are always shifted down compared to text lying in the same line, regardless of its CSS settings!
<li class="navbar-item"><a class="nav-link" href="../contact/contact.php" >CONTACT</a></li>
<li class="navbar-item"><a class="nav-link" href="#"><img src="source" style="border-radius:10px;width:35px;height:35px;"></a></li>
This is the basic code I'm running, I've already tried plenty of methods to align "CONTACT" to the image, but no one of them works, giving me the same result:
You can use flexbox to align items very easily. The rule you need that aligns them vertically is "align-items: center;".
ul {
display: flex;
align-items: center;
}
li {
list-style: none;
margin: 0 .5rem;
}
img {
max-width: 100px;
}
<ul>
<li class="navbar-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="navbar-item">
<a class="nav-link" href="#">
<img src="https://iconarchive.com/download/i47330/icons-land/vista-flags/United-States-Flag-1.ico">
</a>
</li>
</ul>
try
display: inline;
to the image
By default, li displays as list-item. If you change the display property of the element to "inline" it will be displayed next to the text.
Reference: https://www.w3schools.com/cssref/css_default_values.asp
<a class="nav-link" href="#">CONTACT</a>
<a class="nav-link" href="#" style="display:inline"
><img src="source" style="border-radius:10px;width:35px;height:35px"
/></a>
Thanks,
PNS
Related
This has been asked a million times. I have tried every single solution I found here, but none of them worked for me.
I have this navbar:
<div>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark hidden-sm" id="navbar">
<ul class="navbar-nav" id="navToHide">
<li class="nav-item active">
<a class="nav-link" href="#quemsou" id="link1">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="link">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="link">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="" href="#" id="burguerDrop"><i class="fa fa-bars" style="font-size:40px; color:white;"></i></a>
</li>
</ul>
</nav>
</div>
And this jQuery/JS:
$(document).ready(function() {
if (document.documentElement.clientWidth > 480) {
$("#navbar").addClass("fixed-top");
$("#burguerDrop").hide();
} else {
$("#navbar").removeClass("fixed-top");
$("#navToHide").hide();
$("#burguerDrop").show();
}
});
I can't hide my nav on mobile no matter what. I can't hide the nav or the nav-links. But I can hide and show my 'burguerDrop'. My 'buguerDrop' is working fine, though it's not displaying on my computer web browser. However, it is displaying on mobile exactly how I wanted.
But in the other elements, I can't do the same. I have no idea why. I have tried using both "css('display', 'none');" AND "hide();". None of them works to hide my navbar, but both of them works to display my burguerDrop.
I have absolutely no idea why this is happening.
Note: As per the other answers and comments this can be done more cleanly with either CSS styling or using built in Bootstrap classes.
To answer your original question: The main thing you were missing is showing and hiding elements in the right places.
I've re-factored your code so you can make use of the window.resize event:
function setupMobile() {
if (document.documentElement.clientWidth > 480) {
$("#navbar").addClass("fixed-top");
$("#burguerDrop").hide();
$("#navToHide").show();
} else {
$("#navbar").removeClass("fixed-top");
$("#navToHide").hide();
$("#burguerDrop").show();
}
}
$(document).ready(setupMobile);
window.addEventListener('resize', setupMobile);
And here is a demo on Codepen to show this solution in action.
Since you already using bootstrap, why dont you simply use css breakpoints.
.navToHide {
display: none;
}
#include media-breakpoint-up(sm) {
.navToHide {
display: block;
}
}
There is a purely CSS way of doing this. Position sticky basically allows an element to scroll in its parent element. If you want to hide the burger icon you can just do a display: none on a media query like below.
#navbar {
position: sticky;
top: 0;
left: 0;
width: 100%;
}
#media screen and (min-width: 480px) {
#burguerDrop {
display: none;
}
}
Here's the codepen for this:
https://codepen.io/jeffteachestheweb/pen/YzZEqRq
How do I exclude the first element in a list from being targeted by a :hover selector?
CSS:
.navbar .navbar-nav > li :hover {
color:red !important;
}
HTML:
<li>
#Html.ActionLink("Login", "Login", "Home", new { area = "" }, new
{#class ="navbar-item" })
</li>
What I have tried so far:
document.getElementsByClassName("navbar-item")[0].onmouseover = function () {
mouseOver()
};
function mouseOver() {
document.getElementsByClassName("navbar-item")[0].style.color="blue !important"
}
You dont need to use JavaScript/jQuery for this. Just use the :nth-child css selector like this:
/* target all hovered li elements except the first one */
.navbar .navbar-nav > li:nth-child(n+2) a:hover {
color: red;
}
<nav class="navbar">
<ul class="navbar-nav">
<li>
<a class="nav-link" href="#">Link 1</a>
</li>
<li>
<a class="nav-link" href="#">Link 2</a>
</li>
<li>
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Or if you're not using the default bootstrap anchor links and just want to target the li element itself, just chain the :nth-child selector and the :hover selector like this:
/* target all hovered li elements except the first one */
.navbar .navbar-nav > li:nth-child(n+2):hover {
color: red;
}
<nav class="navbar">
<ul class="navbar-nav">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
You could also use not().
/* target all hovered li elements except the first one */
.navbar .navbar-nav > li:not(:first-child):hover {
color: red;
}
<nav class="navbar">
<ul class="navbar-nav">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
I have following code for nav-pills component:
<ul id="steps" class="nav nav-pills form-steps">
<li class="active"><a data-toggle="pill" href="#options"></a></li>
<li><a data-toggle="pill" href="#payments"></a></li>
</ul>
This is how the look of active a is made (basically it's just a circle filled with special color):
.form-steps > li.active > a {
background-color: #931f2a;
}
And here's code for a regular a:
.promoter-form-steps > li > a {
border: 2px solid #931f2at;
height: 30px;
width: 30px;
border-radius: 100%;
}
I suppose that by adding .active class to corresponding li element makes a element filled with color, but it doesn't when I open modal where this component is placed for the fist time. When I open modal for the second time after I click on another link, I see correct behavior, i.e .active class is filled with color. It's an SPA and I have another nav-pills like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills. I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this.
Can you please give me a direction to inspect what I did wrong? Thanks in advance!
Here's the recommended format as determined by Twitter Docs:
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Your list tags need to have a class of nav-item and your anchors need a class of nav-link before it can use the active class
I have created the fiddle for the menu-header section for my webpage. I have made it by seeing this image. Once I click PROGRAMS and WORLD OF NORTHMAN, it should dropdown and show elements but it should only start the dropdown from the border of that header and that is I am not able to make it work.
Below is my HTML code:
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>PROGRAMS</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="dropdown">
<b>WORLD OF NORTHMAN</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>BE EXTRODINARY</i>
</li>
<li><i>RISK & REWARD</i>
</li>
<li><i>BLOG</i>
</li>
<li><i>OUR STORY</i>
</li>
</ul>
</li>
</ul>
</nav>
</div>
How can I make sure that dropdown starts from the border of that menu instead coming directly from each of those text?
Try adding margin-top: 14px to the .topnav ul > li > ul selector:
.topnav ul > li > ul {
display: none;
margin-top: 14px;
width: 200px;
padding: 0;
position: absolute;
background-color: #f76c38;
}
https://jsfiddle.net/2nv4dd2w/15/
As a plus, if you want to close other opened menus: https://jsfiddle.net/2nv4dd2w/16/
Just add this
.dropdown-content{ margin-top:14px; }
You need to add the padding to .topnav a rather than .topnav ul > li. https://jsfiddle.net/2nv4dd2w/14/. This is because the ul html tag sits below the a html tag. If you want to keep the background-color the same size, use margin for the a tag, instead of padding, but I think it looks better with padding in my opinion :)
EDIT: Updated fiddle with inline-block image and navigation. https://jsfiddle.net/2nv4dd2w/19/. This should get you close to what you want. The rest is up to you. Happy Coding.
I have created expandable links where the arrow changes when you expand the link. Expandable works great and the arrow keeps changing correctly when I expand the other link. It doesn't switch correctly if I expand the same link.
Here is a demo.
HTML
<ul class="side-expand">
<li class="expandor">
<a class="adobe" href="#" id="vid_link3">Adobe Digital Editions</a>
<ul>
<li>
<a href="#" id="link22"><i class="icon-video"></i>
Introduction</a>
</li>
</ul>
</li>
<li class="expandor">
<a class="android" href="#" id="vid_link4">Android</a>
<ul>
<li>
<a href="#" id="link29"><i class="icon-video"></i>
Introduction</a>
</li>
</ul>
</li>
</ul>
JAVASCRIPT
$('.expandor > a:first-child').click(function(e) {
e.preventDefault();
var $this = $(this).next('ul');
$(".side-expand li ul").not($this).slideUp();
$this.slideToggle();
$('.side-expand > li').css('background-color', 'transparent');
$('.side-expand > li').removeClass('dexpandor');
var visibleUL = $('.side-expand li').find('ul').is(':visible');
if (visibleUL) {
$(this).parent('li').css('background-color', 'transparent', 'font-weight', 'normal').addClass('dexpandor');
}
});
arrow not changing for the same toggle
Replacing lines 8 through 13 with the following should toggle your arrow class properly:
$(this).parent().siblings().removeClass('dexpandor');
$(this).parent().toggleClass('dexpandor');
Add the class change code in slideToggle() callback. Because the ul is hidden only when slide is complete, which is when you need to remove the class.
DEMO
$('.expandor > a:first-child').click(function(e) {
e.preventDefault();
var $this = $(this).next('ul');
$(".side-expand li ul").not($this).slideUp();
$this.slideToggle(function() {
$('.side-expand > li').css('background-color', 'transparent');
$('.side-expand > li').removeClass('dexpandor');
var visibleUL = $(this).closest('li').find('ul').is(':visible');
if (visibleUL) {
$(this).parent('li').css('background-color', 'transparent', 'font-weight', 'normal').addClass('dexpandor');
}
});
});
.side-expand li ul {
display: none;
}
.expandor {
background-image: url("https://odhelp.blob.core.windows.net/content/artifacts/img/right-arrow-small.png");
}
.expandor,
.dexpandor {
background-color: transparent;
background-position: right 13px;
background-repeat: no-repeat;
}
.dexpandor {
background-image: url("https://odhelp.blob.core.windows.net/content/artifacts/img/down-arrow-small.png");
}
.side-expand li a {
font-size: 14px;
font-weight: normal;
padding-left: 70px;
}
.side-expand li a {
background-size: 25px auto !important;
border-bottom: 1px solid rgb(235, 235, 235);
color: #000;
display: block;
font-size: 15px;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="side-expand">
<li class="expandor">
<a id="vid_link3" value="6plk07k8op" href="#" class="adobe">Adobe Digital Editions</a>
<ul>
<li><a value="6plk07k8op" href="#" id="link22"><i class="icon-video"></i> Introduction</a></li>
<li><a value="q1kogk5dc2" href="#" id="link23"><i class="icon-video"></i> Install</a></li>
<li><a value="zmdge1whxu" href="#" id="link24"><i class="icon-video"></i> Authorize your computer</a></li>
<li><a value="snl5pnvv27" href="#" id="link25"><i class="icon-video"></i> Read eBooks</a></li>
<li><a value="8ldljcbtw0" href="#" id="link26"><i class="icon-video"></i> Return eBooks </a></li>
<li><a value="tfrp7xjgus" href="#" id="link27"><i class="icon-video"></i> Transfer eBooks to reader </a></li>
<li><a value="men1mw9an3" href="#" id="link28"><i class="icon-video"></i> Remove eBooks from reader</a></li>
</ul>
</li>
<li class="expandor">
<a id="vid_link4" value="ayfssj4211" href="#" class="android">Android</a>
<ul>
<li><a value="ayfssj4211" href="#" id="link29"><i class="icon-video"></i> Introduction </a></li>
<li><a value="aqv1ieh6zd" href="#" id="link30"><i class="icon-video"></i> Install the OverDrive app</a> </li>
<li><a value="ospa26ccnh" href="#" id="link37"><i class="icon-video"></i> Return and share titles</a></li>
</ul>
</li>
</ul>
Add this to the click event, it toggle the class :
$(this).parent('li').css('background-color','transparent', 'font-weight', 'normal').toggleClass('dexpandor','expandor');
Demo : jsfiddle