i have a code like this
<li role="presentation">
<a
href="#Twistato"
class="rounded btn"
aria-controls="Twistato"
role="tab"
data-toggle="tab">
Twistato
</a>
</li>;
I get a symbol like an image below
can anyone tell me what this symbol is or its name or how I can find it
actually it was a dropdown icon which was given a default value
.the-menu-custom-nav .nav-tabs > li > a:before {
content: '\f0dd';
top: 7px; }
i removed and its fine now
Related
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
Using bootstrap 4 and asp.net core for a personal project I've been tinkering with for the past couple of months. I've got a navbar in my _Layout that is shared across my entire site. I've also got some css that styles the navbar link text.
I'm trying to change the active class on the links so the currently-visited controller is highlighted with a different color. I'm using js to do this. The color is changing initially, so I'm sure that the js is adding the active class to the new link and removing it from the previous active link, but when the page finishes loading, they reset and the active class goes back to Home.
Here is my navbar in _Layout.cshtml:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<img src="~/images/logo1.png" width="40" height="40" alt="" />
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" asp-action="Index" asp-controller="Home">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="aaaa">Aaaa</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="bbbb">Bbbb</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="cccc">Cccc</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="Index" asp-controller="dddd">Dddd</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<button class="btn btn-outline-danger btn-sm"
type="submit" asp-action="Login" asp-controller="Account">
Login
</button>
</form>
</div>
Here is the js that I'm declaring in the #scripts section of _Layout:
$( '.navbar-inverse .navbar-nav a' ).on( 'click', function () {
$( '.navbar-inverse .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});
And my css:
.navbar-inverse .navbar-nav .open > .nav-link,
.navbar-inverse .navbar-nav .active > .nav-link,
.navbar-inverse .navbar-nav .nav-link.open,
.navbar-inverse .navbar-nav .nav-link.active {
color: yellow;
}
Why is the active link being reset when the new page loads? I know the js is working because while the page is loading, "Home" is not yellow anymore, but the new link I clicked in the navbar is yellow. But when the loading is complete, the yellow goes back to Home. Any insights would be appreciated, I'm rather new at software development.
You're setting active on click. However, when the browser actually goes to that URL following the click, a completely different view is rendered. Therefore, there's no concept of anything having been set a certain way or done previously.
Instead, you need to either have your JS run onload, or simply just send the HTML with the correct item active in the first place, and throw away the JS. The easiest way to do that is something like:
#{ string url; }
Then for each nav link:
#{ url = Url.Action("Foo", "Bar"); }
<li class="#(Request.Path.StartsWith(url) ? "active" : null)">
Foo
</li>
Setting the url variable is mostly just a way to not repeat yourself with the action/controller for the link, since you need the link URL in two different places.
The meat is in the ternary. If the current URL path starts with this link's URL (which should cover both the scenario of being equal to and just being a parent of the current URL), then you apply the active class.
EDIT
Because of using StartsWith, a link for "Home" will basically always be set as active, since every URL would start with /. You probably want to make an exception on that link and instead just do:
#{ url = Url.Action("Index", "Home"); }
<li class="#(Request.Path == url ? "active" : null)">
Home
</li>
Then, that link will only be marked active if the URL is actually /.
Thanks to #Chris Pratt for his guidance. I got this working albeit with a couple of changes, possibly due to me changing my mind on the navbar and moving to a tabbed navbar (like Twitter's mobile app uses). Here's my navbar code in _Layout.cshtml:
<!--navbar-->
#{ string url; }
<ul class="nav navbar-dark bg-dark nav-tabs nav-fill">
#{ url = Url.Action("Index", "Home"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path == url ? "active" : null)" href="#url">Home</a>
</li>
#{ url = Url.Action("Index", "Spells"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="#url">Spells</a>
</li>
#{ url = Url.Action("Index", "Crits"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="#url">Crits</a>
</li>
#{ url = Url.Action("Index", "Journal"); }
<li class="nav-item">
<a class="nav-link #(Context.Request.Path.StartsWithSegments(url) ? "active" : null)" href="#url">Journal</a>
</li>
</ul>
Now that the active class switching is working as expected, I can add some styling, and replace the text with icons that I'll make.
Gave you an upvote, Chris Pratt, but my rep is too low to show it publicly for now. Thanks again.
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 understand that since that since the release of Bootstrap 3, multi-level/multi-tier navigation is no-longer officially supported out of the box. I don't understand why they have made this decision as it seems like a pretty stupid move to me but currently I am trying to restore this functionality/behaviour within my site.
Here is the html for my bootstrap navigation menu:
<nav id="topNavigation" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle grouped for better mobile display-->
<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 visible-xs" href="#">Menu</a>
</div>
<!-- Content that requires toggling on mobile devices-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav level2">
<li class="active">Home</li>
<li>Blog</li>
<li>
<a class="hidden-xs" href="/destinations/">Destinations</a>
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdown">Destinations <b class="caret"></b></a>
<ul class="dropdown-menu level3">
<li class="dropdown-submenu">
<a class="hidden-xs" href="/destinations/europe-the-caucasus/">Europe & the Caucasus </a>
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">Europe & the Caucasus <b class="caret"></b></a>
<ul class="dropdown-menu level4">
<li>Albania</li>
<li>Armenia</li>
<li>Azerbaijan</li>
<li>Georgia</li>
<li>Europe's Arctic Circle</li>
<li>Romania</li>
<li>Turkey</li>
<li>Montenegro</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="hidden-xs" href="/destinations/north-africa/">North Africa</a>
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">North Africa <b class="caret"></b></a>
<ul class="dropdown-menu level4">
<li>Egypt</li>
<li>Libya</li>
<li>Morocco</li>
<li>Mali & Burkina Faso</li>
<li>Sudan</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Currently, I have managed to restore the multi-level navigation functionality for the desktop using hover effects in pure css:
#media (min-width: 992px){
/*Add multi-level navigation support*/
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:-2%;left:99.5%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;margin:0;padding:0}
.dropdown-submenu:active>.dropdown-menu, .dropdown-submenu:hover>.dropdown-menu {display: block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.navbar-nav > li:hover > ul.dropdown-menu,
.navbar-nav > li:hover > ul.dropdown-menu > li.dropdown-submenu:hover > ul.dropdown-menu {
display: block;
background-color: #FFA050;
}
.navbar-nav > li:hover ul li a:hover,
#topNavigation .navbar-nav > li.active ul li a:hover{
background-color: #451F00;
color: #FFA050;
}
#topNavigation .navbar-nav > li.active ul li a {
background-color: #FFA050;
color: #451F00;
}
}
This gives the following effect:
However, on mobile devices there seems to be a bit of an issue which I believe is caused by the data-toggle attributes.
The menu looks correct as you can see above however, when I click on one of the continents which should trigger the collapsed list of countries to open, it instead collapses the destinations dropdown wihtout displaying any the next tier of navigation.
My main question is, how can I adapt my code to ensure that the data-toggle attribute is targeting the correct menu exposing the content underneath? I've tried replacing the value in the data-toggle but this doesn't actually seem to be doing anything and exhibits the same behaviour no matter what is put here.
Any help will be greatly appreciated. I'll also put together a fiddle to try and demonstrate the issue more clearly.
N.B. I've also tried following the tips in the link below but unforunately they don't seem to change the behaviour for mobile-sized screens at all:
http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/
Looking at the bootstrap dropdown source, it seems that boostrap attaches an event that triggers the a function that hides all dropdown-menu, when a dropdown item is clicked. If we stop that event from running and toggle the visibility ourselves when clicking a dropdown toggle, it should work. So something like:
//might be selecting too many things
$(".level3 .dropdown-toggle").click(function(e){
$(this).closest('li').toggleClass('open') //show dropdown
e.stopPropagation(); //stops from hiding menu
})
Example
I haven't tested how this code affects anything else, but I suppose it's a good start.
You have data-toggle set as "dropdownTwo" here.
<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">North Africa <b class="caret"></b></a>
In the Bootstrap JS docs it is stated that:
data-toggle="dropdown" still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
As your toggle isn't "dropdown" but "dropdownTwo", Bootstrap doesn't know what to target.