I'm trying to popup menu with Bootstrap 4 popover for category list.
My code below
<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
<ul class="no-bullet" id="categoryPopOverMenu">
<li class="nav-item dropdown">
#foreach($categories as $category)
<a class="dropdown-item" href="#">{{$category['category_name']}} #if ($settings['show_category_movie_count'] === 1) ({{$category['movies_count']}}) #endif</a>
#endforeach
</li>
</ul>
And JS code below
$('[data-toggle="popover"]').popover({
trigger: 'focus',
html:true,
content : function() {
return $('#categoryPopOverMenu').html();
}
});
Please Look at below image and you can see at the left side of image my list has no bullets. Also you can see at right side of picture, a black bullet is appearing when i show my list in a popover
https://i.hizliresim.com/az01LB.png
Thanks inadvance.
Thanks for the replies. Below code working good
<a tabindex="0" class="nav-link catdropdown" role="button" data-toggle="popover" data-placement="bottom">Kategoriler</a>
<ul class="list-group" id="categoryPopOverMenu" style="padding:0px;display:none;width:70px;">
#foreach($categories as $category)
<li class="list-group-item list-group-item-info justify-content-between" style="padding:0px">
<a class="dropdown-item" href="#">{{$category['category_name']}} #if ($settings['show_category_movie_count'] === 1) <span class="badge badge-default badge-pill pull-right" style="font-size:11px; font-weight:normal">{{$category['movies_count']}}</span>#endif</a>
</li>
#endforeach
</ul>
Obviously your css is overriding.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
See this link this might help you.
Visit Apply CSS to popover in Bootstrap
Related
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="bags" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More <i class="fas fa-angle-down ml-3"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
here is the code for dropdown
.dropdown-toggle::after {
display: none;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
this is the css for displaying dropdown on hover
clicking on the link doesnt navigate to the page...
i am using express as the backend n typing the link in the navbar works but not clicking the link..
i tried adding data-target but also doesnt seems to work..
i treid setting pointer-event to auto but tat also doesnt deems to work..
Try using data-hover="dropdown" aria-haspopup="true" aria-expanded="false"
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="services.html">SERVICES</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
This link might be a help.
Bootstrap Dropdown Hover
Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.
Keypoint is to add data-hover="dropdown"
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
...
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}
I'm experiencing a problem related to expanding menus. I cannot seem to be able to link outside of the expanding menu as the only thing all links inside the menu do are collapse it or just simply do nothing at all.
Here are two examples of the menu system that I'm trying to create:
http://www.ullastiina.fi/testsite/page.html
http://www.ullastiina.fi/testsite/page2.html
I have tried to look into this for many hours now but I'm currently at a complete standstill. Can anybody help me?
PAGE.HTML
HTML
<div class="divcenter">
<div class="menu">
<font color="#ffffff">+ Expand</font>
<font color="#ffffff">- Collapse</font>
<ul id="list">
<li class="li1">BLANK TEXT TITLE</li>
<li class="li2">Link 1</li>
<li class="li2">Link 2</li>
</ul>
</div>
</div>
CSS
#list, .show {
display:none;
color: #5e5e5e;
font-weight: normal;
padding:10px;
list-style-type:none}
.hide:focus + .show {display: inline;}
.hide:focus { display: none; position:relative;}
.hide:focus ~ #list { display:block;}
PAGE2.HTML
<div class="divcenter">
<div class="menu">
<li>
<font color="#FFFFFF">+ Expand</font>
<div class="nav-collapse88">
<ul>
<li class="li1"><font color="#666666">BLANK TEXT TITLE</font></li>
<li class="li2">Link 1</li>
<li class="li2">Link 2</li>
</ul>
</div>
</div>
JS
$(function(){
$(".nav-collapse88").hide();
$("a").click(function(e){
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
Your js doesn't make sense. Try this:
$(function(){
$( ".menu ul" ).hide();
$( ".hide" ).click(function(e){
e.preventDefault();
$( ".hide" ).hide();
$( ".show" ).show();
$( ".menu ul" ).slideDown();
});
$( ".show" ).click(function(e){
e.preventDefault();
$( ".show" ).hide();
$( ".hide" ).show();
$( ".menu ul" ).slideUp();
});
});
Or see this Fiddle. Hope this helps.
I am trying to replace the indicators on a bootstrap carousel with text, almost like a navigation of sorts but have not successfully discovered how to do this even after hours of searching. I have found a lot of css options for customizing the indicators, but not a method for replacing them with text entirely. The text will be an identifying title for the carousel "slide". Naturally the code is
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
I would like to say I've tried a lot, but everything has been a shot in the dark and I knew it was going the wrong direction to begin with. I appreciate help in advance figuring this out.
This is how I did it:
HTML
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active">text1</li>
<li data-target="#carousel" data-slide-to="1">text2</li>
<li data-target="#carousel" data-slide-to="2">text3</li>
</ol>
CSS
.carousel-indicators li{
text-indent:0;
width:200px;
height: 40px;
border:none;
background-color: transparent;
}
This works in FF but not I.E. The mouseover on the a tag won't activate. I want to be able to set the class for the a tag when user mouse over it.
<div class="selects-options" id="dropsort"
onmouseover="divshowsort();"
style="position: absolute; top: 8px; left: 1px; width: 153px;display:none;"
onmouseout="hidesort();">
<div class="drop-holder">
<div class="drop-list">
<ul>
<li class="items_selected" id="li1" rel="0">
<a onmouseover="sortclass('li1');"
onclick="divhidesort('R');" href="#">
<span>Relevance</span>
</a>
</li>
<li class="" id="li2" rel="1">
<a onmouseover="sortclass('li2');"
onclick="divhidesort('A');" href="#">
<span>Title A-Z</span>
</a>
</li>
<li class="" id="li3" rel="2">
<a onmouseover="sortclass('li3');"
onclick="divhidesort('D');" href="#">
<span>Newest</span>
</a>
</li>
</ul>
</div>
</div>
</div>