In the First line when add last two classes(nav-dark,bg-dark). navbar's items are not showing
<nav class="navbar navbar-expand-lg nav-dark bg-dark">
<ul class="navbar-nav">
<li class="nav-item">
Download
</li>
<li class="nav-item">
Pricing
</li>
<li class="nav-item">
Menu
</li>
</ul>
Related
I have this code in bootstrap 5 and it works as expected.
when clicking the tag the appropriate divs collapsed/hiden.
However i want to prevent the closing of other divs when you open the other one, how to prevent this in bootstrap 5?
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" role="button" href="#ui-enquiries" aria-expanded="false" aria-controls="ui-enquiries">
<i class="icon-grid-2 menu-icon"></i>
<span class="menu-title">Inquiries</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-enquiries">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> 1<li>
<li class="nav-item"> 2<li>
<li class="nav-item"> 3<li>
</ul>
</div>
</li>
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
I'm using bootstrap 5 Scrollspy to navigate into different sections of my home page. It works fine when I click on the navigation link (E.g, projects). The url becomes: https://example.com/#projects and scroll to that section.
HTML:
<body data-bs-spy="scroll" data-bs-target="#navbar-main" data-bs-offset="240">
<ul class="nav navbar-nav ms-md-auto mb-2 mb-lg-0 fixed-top">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
</ul>
<main>
<section id="about"> ...</section>
<section id="services"> ...</section>
<section id="projects"> ...</section>
</main>
</body>
But When I'm refreshing or using the same URL in the address bar and load the page it doesn't scroll to that section. So How can I achieve the behavior of taking the #id from the url and scrolling to that section??
[Note: I'm using body{overflow-y: hidden} and showing a splash screen for say 5 seconds when a user loads the page for the first time then resetting back to overflow: auto]
You are missing the id="navbar-main" on your <ul> that corresponds to data-bs-target="#navbar-main".
Is there a built-in Bootstrap 4 trick that will align these three to centre, in a line "on a large screen", with a small space between them, then place them over each other when displayed on a small screen?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
I've tried adding custom css but it keeps falling apart and looks messy.
At the moment, the code above output this:
Is there a build in bootstrap 4 trick that will align these three to centre
One of the first tricks is to use Bootstrap classes that actually exist.
col-6-lg col-4-md col-1-sm classes don't exist.
The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.
The mx-auto class needs to be added to the column to center it.
Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>
I am trying to get a Shopping glyphcon near the "Shop" ActionLink, and this is what I get:
I want the home icon to be before the "Shop" and in the same line.
I'm using MVC5 .cshtml file
This is the Code:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#* Glasses Menu *#
<li class="dropdown">
Glasses <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>#Html.ActionLink("InfinityAR", "InfinityAR", "Glasses")</li>
<li>#Html.ActionLink("Google Glass", "GoogleGlass", "Glasses")</li>
#*<li class="divider"></li> //TODO: Enter here something
<li>Separated link</li>*#
</ul>
</li>
#* SDK's Menu *#
<li class="dropdown">
Developers <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li style="margin-left:10px">SDK</li>
<li class="divider"></li>
<li>#Html.ActionLink("METAIO", "Metaio", "Developers")</li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-home" />
</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
I think you've confused what HTML.ActionLink() does. It generates the anchor link with tags.
So if you inspect the generated HTML code of this line:
#Html.ActionLink("Shop", "Shop", "Glasses")
It will produce something like this:
Shop
Your code will produce something like this:
Shop"><span class="glyphicon glyphicon-home" /></a>
You want to use the URL.Action() helper:
<span class="glyphicon glyphicon-home"></span> Shop