I am having a issue with getting my bootstrap to work with a site I am designing for a friend.
<nav class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/" style="width: 240px;">
West Coast Refuse Trucks
</a>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="index.html" class="active">
Home
</a>
</li>
<li>
<li>
<a href="about.html">
About
</a>
</li>
<li>
<a href="firstgear.html">
First Gear
</a>
</li>
<li>
<a href="/play">
Uploads
</a>
</li>
<li>
<a href="/forums">
Refuse Community
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
I am not sure what is preventing it from highlighting in my page on my site. Home shows up as usual. Any help?
Assuming that you are using Bootstrap 2.3.2, you suppose to add active class to <li>, not to <a>.
<ul class="nav">
<li class="active">
Home
</li>
<!-- ... -->
</ul>
Demo: http://bootply.com/97634
Related
My logo vanishes when I try to add a hyperlink.
<header class="header">
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
<h1>header here</h1>
<nav>
<ul class="header-nav">
<li class="nav-item">
<a class="nav-link" href="../example-page/profile.html">PROFILE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">ABOUT</a>
</li>
</ul>
</nav>
</header>
With this I was expecting to see my logo. The link is clickable however whatever photo I replace it with it vanishes.
I am trying to avoid fixed height of bootstrap columns. I do have a Custom Mega Menu in my project where we show all our Nav bar entries. This one is a dynamically created code so it will be difficult to change the logic of the Mega menu creation so I am looking for some Css solution to fix this issue.
My code in high level look like.
<div class="row">
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
<div class="col-xl-3">... contents </div>
</div>
Since this one is a dynamic item we can expect n number of col-xl-3
The issue is I am getting some extra space in between columns. ( taking the max size item's size in each row)
As you can see in the image attached, The yellow color marked area I am trying to avoid.
I have tried to use d-block with float-left to the child elements.
Then I am getting display something like below.
Here also I am getting extra space in some places. Is there any way to get out of this issues?
What I am looking for is to move sections 5 to below 1 st section and 6 one to below 2 nd section etc .And remove the extra space between top and bottom columns
(the yellow highlighted space in the image)
I am adding a testing sample below here.
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
type="text/css">
</head>
<div class="container-outer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-12 navtop">
<nav class="navbar navbar-expand-lg navbar-light">
<div id="navbarContent" class="collapse navbar-collapse flex-md-column">
<ul class="navbar-nav mr-auto second-ul">
<ul class="navbar-nav treemenu">
<li class="nav-item dropdown position-static">
<a class="nav-link mnn-nav-link channelclass" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MENU
<i class="fa fa-down"></i>
</a>
<div class="dropdown-menu w-100 ddn" aria-labelledby="navbarDropdown">
<div class="row d-block">
<div class="col-xl-3 float-left">
<p data-id="ACCT" class="submenu-title mnn-sdaaaent-nav-click">
1
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled ACCT ">
<li>
<a class="mnn-nav-sub-click" data-id="IPASSBOOKACCT">
seffwew
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled seffwewACCT mnn-nav-ul-sub" style="display: none;">
<li>
General Information
</li>
<li>
sefscsdsd Summary
</li>
<li>
Transaction
</li>
</ul>
</li>
<li>
sfdsfsds Income
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="TAX" class="submenu-title mnn-sdaaaent-nav-click">
2
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled TAX ">
<li>
2019 sdfdsfsfsdfs Forms
<sup class="newtext">NEW</sup>
</li>
<li>
<a target="_blank" href="/Commonfiles/2019/2019POFManual.pdf">2019 POF Manual</a>
<sup class="newtext">NEW</sup>
</li>
<li>
Estimated Composite sdfdsfsfsdfses 4th Qtr Election
</li>
<li>
ds sfsdsdsd and Consent
</li>
<li>
NY IT-2658 Estimate
</li>
<li>
State sdfdsfsfsdfs Questionnaire
</li>
<li>
sdfdsfsfsdfs Presdaaaation Sign-Up
</li>
<li>
<a class="mnn-nav-sub-click" data-id="ARCHIVES">
Archives
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled ARCHIVES mnn-nav-ul-sub" style="display: none;">
<li>
2018 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2018/2018POFManual.pdf">2018 POF Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2018/2018SampleForms965and965-A.PDF">2018 dfgdfgdg Manual addendum-Sample Forms 965 and 965-A</a>
</li>
<li>
Section 965 State by State Instructions
</li>
<li>
2017 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/Sec965FAQ.pdf">Section 965 FAQs</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017dfgdfgdgManual.pdf">2017 dfgdfgdg Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017sdfdsfsfsdfs_Information.pdf">2017 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2017/2017dfgdfgdgManualAddendum965TransitionsdfdsfsfsdfsREVISED101218.pdf">2017 dfgdfgdg Manual Addendum 965 Transition sdfdsfsfsdfs revised 101218</a>
</li>
<li>
2016 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2016/2016_sdfdsfsfsdfsInformation.pdf">2016 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2016/2016dfgdfgdgManual.pdf">2016 dfgdfgdg Manual</a>
</li>
<li>
2015 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2015/2015sdfdsfsfsdfsInformation.pdf">2015 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2015/2015dfgdfgdgManual.pdf">2015 dfgdfgdg Manual</a>
</li>
<li>
2014 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/Commonfiles/2014/2014sdfdsfsfsdfsInformation.pdf">2014 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2014/2014dfgdfgdgManual.pdf">2014 dfgdfgdg Manual</a>
</li>
<li>
2013 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/CommonFiles/2013/2013sdfdsfsfsdfsInformation.pdf">2013 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2013/2013dfgdfgdgManual.pdf">2013 dfgdfgdg Manual</a>
</li>
<li>
2012 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/CommonFiles/2012/2012sdfdsfsfsdfsInformation.pdf">2012 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2012/2012dfgdfgdgManual.pdf">2012 dfgdfgdg Manual</a>
</li>
<li>
2011 sdfdsfsfsdfs Forms
</li>
<li>
<a target="_blank" href="/CommonFiles/2011/2011sdfdsfsfsdfsInformation.pdf">2011 sdfdsfsfsdfs Information</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/2011/2011dfgdfgdgManual.pdf">2011 dfgdfgdg Manual</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="FINPLANPTR" class="submenu-title mnn-sdaaaent-nav-click">
3
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled FINPLANPTR ">
<li>
dfgdfgdg-dfgdgdfgdfg Planning Services sfsdsdsd
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="ADM" class="submenu-title mnn-sdaaaent-nav-click">
4
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled ADM ">
<li>
<a target="_blank" href="/Commonfiles/dfdfs/DirectAdmitBook.pdf">Direct dfdfs Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/NewsdsdsdManual.pdf">New sdsdsd & Principal Manual</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/sdsdsdshipagreements.pdf">sdsdsdship Agreements</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/dfdfs/Americas_Operating_Agreement_as_amended_July_4_2015.pdf">Americas Operating Agreement</a>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<p data-id="RET" class="submenu-title mnn-sdaaaent-nav-click">
5
<i class="sub-up-down fa-up fa"></i>
</p>
<ul class="list-unstyled RET ">
<li>
<a class="mnn-nav-sub-click" data-id="SPDS">
Summary Plan Descriptions (sdssdsd)
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled sdssdsd mnn-nav-ul-sub" style="display: none;">
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdsdship sdsdaa Plan - HR-10 Plan - 2016.pdf">TYU sdsdsdship sdsdaa Plan -HR10-Plan</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdaa Savings Plan -401(k) sdsdsd-principles - 2016.pdf">TYU sdsdaa Savings Plan-401(k)</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU PDBRP and IDBRP 2017.pdf">TYU PDBRP and IDBRP</a>
</li>
</ul>
</li>
<li>
<a href="/sdsdaa/401kContribution/_401kExclusionMsg">
401(k) asdaaa and
Election
</a>
</li>
<li>
<a class="mnn-nav-sub-click" data-id="sdssdsd">
Summary Plan Descriptions (sdssdsd)
<i class="fa fa-down"></i>
</a>
<ul class="list-unstyled sdssdsd mnn-nav-ul-sub" style="display: none;">
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdsdship sdsdaa Plan - HR-10 Plan - 2016.pdf">TYU sdsdsdship sdsdaa Plan -HR10-Plan</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU sdsdaa Savings Plan -401(k) sdsdsd-principles - 2016.pdf">TYU sdsdaa Savings Plan-401(k)</a>
</li>
<li>
<a target="_blank" href="/Commonfiles/sdsdaa/TYU PDBRP and IDBRP 2017.pdf">TYU asdadad and sdfsfsdsd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-xl-3 float-left">
<a target="_blank" class="submenu-title mnn-sdaaaent-nav-click" href="https://sdaaa.TYU.net">6</a>
</div>
<div class="col-xl-3 float-left">
<a class="submenu-title mnn-sdaaaent-nav-click" href="https://ptrshpdashboard.TYU.net">7</a>
</div>
</div>
</div>
</li>
</ul>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#navbarContent").hide();
$('.navtrigger').click(function () {
$("#navbarContent").toggle();
$(this).toggleClass('active');
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
setTimeout(function () {
$('body').addClass('loaded');
}, 100);
});
$(".mnn-nav-ul-sub").hide();
$(".mnn-nav-sub-click").click(function () {
$(".mnn-nav-ul-sub").slideToggle();
$(this).find('i').toggleClass('fa fa-down fa fa-up');
$(".mnn-nav-sub-click").sdaaaent().removeClass('navactive');
});
$(".ddn").on("click", function (e) {
e.stopPropagation();
});
</script>
</body>
</html>
maybe this helps you CSS: remove empty Space between boxes
In your case
.wrapper {
column-count: 3;
column-gap: 1.25rem;
}
.part {
break-inside: avoid-column;
position: relative;
display: inline-block;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.row will be .wrapper and .col-xl-3 is .part, I recommend you not to use bootstrap classes for this
hide-on-med-and-down works fine in firefox 68.0b1 and safari 12.1 which means that with a screen width <= 992px my ul with the class .hide-on-med-and-down is not shown and when > 992px, it is shown as expected. As this menu appears in chrome with another code, it is seems not related to the chrome browser.
BUT on chrome only, when the screen is > 992px, the content of the ul keep not showing! But with another
I have tried the replace the class hide-on-med-and-down with show-on-large but the result is also unexpected (the ul keep showing on small screen).
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
AMV
<a href="#" data-target="mobile-nav" class="sidenav-trigger>
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav " id="mobile-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<script type="text/javascript" src="js/materialize.js">
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
The issue was related to the screen who was magnified and I did not care about this parameter. As I reset the zoom to 100%, the menu was showie as expected.
That is because you are not using variable sign or double quotes for string deceleration in <a href="<?php echo URLROOT; ?>
and you have also missed double quotes in class="sidenav-trigger>
so if you run your code the sidevav wont work Anymore
Try Fixing href in all of the <a href="<?php echo URLROOT; ?> tag of your ul
eg. example
<nav class="teal">
<div class="container">
AMV
<div class="nav-wrapper">
<a href="#" data-target="mobile-nav" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav " id="mobile-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
<script type="text/javascript" src="js/materialize.js">
$(document).ready(function(){
$('.sidenav').sidenav();
});
</script>
Using w3.css functionalities, I am trying to write an HTML program to create cascaded dropdown menu with the help of this tutorial.
My code is as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title>Query Control Panel</title>
</head>
<body>
<div class="w3-bar w3-black">
abc
<div class="w3-dropdown-hover">
<button class="w3-button">dropdown-1</button>
<div class="w3-dropdown-content w3-card-4">
<div class="w3-bar w3-light-gray">
<div class="w3-dropdown-click">
<button class="w3-button">dropdown-2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-right">
link-1
link-2
</div>
</div>
</div>
<div class="w3-dropdown-click">
<button class="w3-button">dropdown-3</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-left">
link-3
link-4
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
When I hover over dropdown-1, the elements that should come under dropdown-2 and under dropdown-3 respectively, appear without hovering or clicking.
The following image illustrates the output I am getting when my mouse is over dropdown-1:
Desired Output:
When I hover my mouse over dropdown-1, dropdown-2 and dropdown-3 should appear. When I click dropdown-2, only then Link-1 and Link-2 should appear. Similarly, for dropdown-3.
Fiddle
Kindly find the fiddle here
The external resources used in the fiddle are:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
and
https://www.w3schools.com/w3css/4/w3.css
I think you are trying to build multi-level menu, I've created a fiddle take a look at this
<ul class="nav site-nav">
<li>
<a href=#>Lorem</a>
</li>
<!--
-->
<li>
<a href=#>Ipsum</a>
</li>
<!--
-->
<li class=flyout>
<a href=#>Dolor</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li>
<a href=#>Foo Bar</a>
</li>
<li>
<a href=#>Bar Baz</a>
</li>
<li class="flyout-alt">
<a href=#>Baz Foo</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li>
<a href=#>Foo Bar</a>
</li>
<li>
<a href=#>Bar Baz</a>
</li>
<li class="flyout-alt">
<a href=#>Baz Foo</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li class="flyout-alt">
<a href=#>Foo Bar</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li>
<a href=#>Bar Baz</a>
</li>
<li class="flyout-alt">
<a href=#>Baz Foo</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li>
<a href=#>Bar Baz</a>
</li>
<li>
<a href=#>Baz Foo</a>
</li>
<li>
<a href=#>Foo Bar</a>
</li>
</ul>
</li>
<li>
<a href=#>Foo Bar</a>
</li>
<li>
<a href=#>Foo Bar</a>
</li>
</ul>
</li>
<li>
<a href=#>Bar Baz</a>
</li>
<li class="flyout-alt">
<a href=#>Baz Foo</a>
<!-- Flyout -->
<ul class="flyout-content nav stacked">
<li>
<a href=#>Bar Baz</a>
</li>
<li>
<a href=#>Baz Foo</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
My navigation bar isn't displaying the dividers for every subpage element. This is only happening in google chrome,not IE or FF. Here is an image (click here for larger size of image):
Here is my HTML code:
<li class="dropdown">
<a href="/jrknet/www/company" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
Company
<b class="caret">
</b>
</a>
<ul class="dropdown-menu">
<li>
<a href="/jrknet/www/company/about-us">
About us
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/meet-the-team">
Meet the Team
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/mission-statement">
Mission Statement
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/development-methodology">
Development Methodology
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/quality-management">
Quality Management
</a>
</li>
<li class="divider">
</li>
<li>
<a href="/jrknet/www/company/business-continuity">
Business Continuity
</a>
</li>
</ul>
You can check zoom-in and zoom-out when such issues arise..
i don't find any problem with the code..
Moreover, if the problem remains, you can try changing your display resolution..