I can't believe this is as difficult as it seems. I want to use a Bootstrap dropdown list, but I want the caret to start off facing right and then point downward when the dropdown has been expanded. Rotating the caret as it is 90 degrees, is not the issue. The issue is how do I begin with the caret pointing to the right. Do I have hide the caret and totally replace it with something different?
CSS for rotation:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(90deg);
}
/*for animation*/
.dropdown-toggle:after {
transition: 0.7s;
}
HTML:
<div class="dropdown">
<span class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span>
Dropdown Example
</span>
</span>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Update
For #mahan who believes 'I must be doing something wrong". Here is the code for my test page in which the caret does appear pointing to the right, but it does not rotate and the menu does not expand:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<style>
.dropdown-toggle::after {
border-top: .3em solid transparent !important;
border-right: .3em solid transparent !important;
border-bottom: .3em solid transparent !important;
border-left: .3em solid !important;
vertical-align: middle !important;
transition: 0.7s;
}
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(90deg);
/*
You may transform origin of the caret.
*/
transform-origin: 0.15em 0.32em;
}
</style>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</body>
</html>
<script src="~/Scripts/jquery-3.4.1.slim.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
this one makes dropdown face down
<div class="dropdown">
</div>
this one makes it open to the right then down.
<div class="dropright">
</div>
Thats what bootstrap website shows.
In case of replacing your caret this solution should work after doing display none to your caret icon. I am giving this alternative answer because i can not see working code in question
.dropdown-toggle::after {
content: ">";
transform: rotate(270deg);
}
Related
I have a Bootstrap 5 List Group object on the page. I'd like to add oversize Font Awesome icons to make it a little more visually interesting.
I have successfully added the icon using a span and some styling but am having an issue with the icon falling out of the bounds of the list-group-item. See the images below.
I'd like to keep the icon within the list-group-item but can't seem to make it work. I have tried z-indexing it but that doesn't work.
I think it might be related to where the span is perhaps?
.pages-icon {
font-size: 90px;
position: absolute;
right: 0;
top: -20px;
transform: rotate(11.81deg);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="list-group rounded-10">
<a href="#" class="list-group-item list-group-item-action w-100">
<span class="pages-icon"><i class="fa-thin fa-people-group text-cpPink"></i></span> Our People
</a>
<a href="#" class="list-group-item list-group-item-action">
<span class="pages-icon"><i class="fa-thin fa-building text-cpBlue"></i></span> Offices
</a>
Departments
Business Information
Events & What's On
Events & What's On
</div>
Seems like limiting overflow with Bootstrap's utility classes, along with a more robust negative top position, does the trick. Note that you don't really need the wrapping span elements.
I added an opacity effect for fun.
.pages-icon {
font-size: 90px;
position: absolute;
right: 0;
top: -50%;
transform: rotate(11.81deg);
opacity: 0.75;
transition: opacity 0.3s;
}
.list-group-item:hover .pages-icon {
opacity: 1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="list-group rounded-10">
<a href="#" class="list-group-item list-group-item-action overflow-hidden w-100">
<i class="pages-icon fa-solid fa-people-group text-danger"></i> Our People
</a>
<a href="#" class="list-group-item list-group-item-action overflow-hidden">
<i class="pages-icon fa-solid fa-building text-info"></i> Offices
</a>
Departments
Business Information
Events & What's On
Events & What's On
</div>
You can add overflow: hidden to your list-items. This will hide anything that overflows outside of the container. As the user above suggested, this can be done with a bootstrap class as well.
I have a problem where the toggle button appears just to the right of my brand image. The same thing happens if I use a brand name. This is what it looks like.
I want the toggle to look like this.
I have searched for solutions but all of them are dealing with earlier versions of Bootstrap. I started having the problem when I upgraded the Bootstrap gem to 4.5.0.
Here is my html code.
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fas fa-bars"></i>
</button>
<%= link_to image_tag("ibraini_navbar.png", class: "img-fluid navbar-brand", alt: "#{t :page_title_home}"), home_path %>
</div>
Here is the related CSS code. I didn't include the code where I set the height of the navbar to adjust the size of the image.
.navbar-custom .navbar-brand, .navbar-custom .navbar-header, .navbar-custom .navbar-nav { a { color: $linkColorHeader; } a:hover, a:focus { text-decoration: none; color: $linkColorHover; } }
.navbar-custom .navbar-toggler { color: $linkColorHover; #include font-size(24px); border-radius: 2px; padding: 0 4px; }
.navbar-custom .navbar-toggler:hover, .navbar-custom .navbar-toggler:focus { background-color: #599ed7; color: $linkColorHeader; }
.navbar-custom .navbar-brand .navbar-toggler:focus, .navbar-custom .navbar-brand .navbar-toggler:active, .navbar-custom .navbar-brand:focus { outline: 0; }
I have the same problem if I use a brand name. The toggle is still positioned just to the right of the name.
I have similar html and css code in the other program that is working like the second picture.
I checked the current documentation and it says that the toggle goes to the left by default which is what I want. I have never had this problem with a toggle. Hopefully there is something that I'm not seeing that can be easily fixed.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand text-light" href="#">
<img src="" alt="logo-here" style="width:40px;"> Brand Name
</a>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" href="#">Link Here</a>
</li>
</ul>
</div>
</nav>
I took another look at the Bootstrap documentation. I realized that class 'navbar-header' no longer exists in Bootstrap 4.5.0. I rewrote my markup to look like the documentation found here.
The markup in my question is gone. Here is my new code.
<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<%= link_to locale_root_path(anchor: "overview"), class: "navbar-brand page-scroll" do %>
<span class="text-red">Light</span><span class="text-blue">Be Corp</span>
<% end %>
......
</div>
</nav>
I have the toggle to the left without the brand name as expected. All of my websites will need to be modified. That's why my second image shows the brand name.
Why does my top navbar on this page wrap before and after the "Landscaping" menu option?
I'm taking W3.CSS out for a test drive and am finding it a fairly satisfactory experience so far. I've produced a skeleton website rather quickly and find it clearer and more concise than I'm used to getting when I don't use W3.CSS.
The skeleton is working reasonably well aside from the strange split around the Landscaping option. See the page here.
I can't see anything in my code that would seem likely to cause these breaks. Or maybe I should say my debugging skills with Devtools are not quite sufficient to know how to track this problem down.
Can anyone help me figure out what's wrong?
.w3-block {
display: inline-block !important;
width: auto !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aux02 - About Us</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="javascript/all.js"></script>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div class="w3-bar w3-white w3-card" id="myNavbar">
Auxsable
<!-- Right-sided navbar links -->
<div class="w3-right w3-hide-small">
<i class="fa fa-home"></i> HOME
<i class="fa fa-mobile-alt"></i> CONTACT US
<a onclick="myAccFuncTop()" href="javascript:void(0)" class="w3-button w3-block w3-white" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i></a>
<div id="demoAccTop" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> FORESTRY
<i class="fa fa-user"></i> ABOUT US
</div>
<!-- Hide right-floated links on small screens and replace them with a menu icon -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="w3_open()">
<i class="fa fa-bars"></i>
</a>
</div>
</div><!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
Close <i class="fas fa-times-circle"></i>
<i class="fa fa-home"></i> Home
<i class="fa fa-mobile-alt"></i> Contact Us
<!-- Landscaping -->
<a onclick="myAccFunc()" href="javascript:void(0)" class="w3-button w3-block w3-white w3-left-align" id="myBtn">
<i class="fa fa-th"></i> Landscaping <i class="fa fa-caret-down"></i>
</a>
<div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
<i class="fas fa-drafting-compass"></i> Design
<i class="fas fa-seedling"></i> Installation
<i class="fas fa-hammer"></i> Maintenance
<i class="fas fa-leaf"></i> Plants
</div>
<i class="fas fa-tree"></i> Forestry
<i class="fa fa-user"></i> About Us
</nav>
<div class="w3-auto">
<div class="w3-container w3-padding">
<br><br><br>
<h1>About Us</h1>
<p>J<del>xxxxxx</del> S<del>xxxxxxx</del> is a Registered Professional Forester and graduate of the
Honours Bachelor of Science in Forestry program at Lakehead University in Thunder Bay.</p>
<p>J<del>xxxxxx</del> has extensive experience in silviculture and site rehabilitation. Along with
landowners, J<del>xxxxxx</del> writes woodlot management plans and tree marking prescriptions that
focus on each customer's needs and desires for their woodland area.</p>
<p>Combining her skills of forest management and silviculture, she adds a little flair and generates
unique and beautiful native plant landscape designs for the Carolinian Forest Region.</p>
</div>
<div class="w3-container w3-padding">
<div class="w3-panel w3-light-grey w3-large">
<p class="w3-medium w3-serif">
<i>Serving Lambton, Huron, Middlesex and Essex Counties</i></p>
</div>
</div>
</div><!-- w3-auto -->
<!-- Footer -->
<footer class="w3-center w3-blue-grey w3-padding">
<p><i class="far fa-copyright"></i> 2019</p>
</footer>
</body>
</html>
You can change two class like this
/* if you dont want to float right */
.w3-right {
/* float: right!important; */
}
.w3-block {
display: inline-block;
/* width: 100%; */
}
If you want to keep float right, only change css .w3-block to
.w3-block {
display: inline-block;
/* width: 100%; */
}
Above is the screen shot of the html structure of your menu.
You could use ul and li for the same menu and the sub menu items as well.
I do not know much about W3.css but your css has too many "!important", which is not at all recommended. Instead I would suggest you to re-work the structure, as the current one will not support the RWD.
<style>
.menu{
display:block;
text-decoration:none;
list-style:none;
/* width as per requirement; & other styling */
}
.menu > li{
position:relative; /* important to maintain the sub-menu item as local. */
display:inline-block;
/* width if needed */
}
.menu li a {
display:block;
width:100%;
/*padding as per the need*/
}
.menu .subMenu{
display:none;
position:absolute;
/* top as per the height of the .menu line-height or height */
left:0;
/* width: 100% or in em's */
}
.menu > li:hover .subMenu{
display:block;
}
.menu .subMenu li{
display:block;
width:100%;
}
</style>
<ul class="menu">
<li><span class="homeIcon"></span><span>Home</span></li>
<li><span class="contactusIcon"></span><span>Contact us</span></li>
<li><span class="forestryIcon"></span><span>forestry</span></li>
<li><span class="aboutusIcon"></span><span>About us</span></li>
<li>
<span class="landscapingIcon"></span><span>Landscaping</span>
<ul class="subMenu">
<li class="subMenuItem"><a href="#"item one</a></li>
<li class="subMenuItem"><a href="#"item two</a></li>
<li class="subMenuItem"><a href="#"item three</a></li>
</ul>
</li>
</ul>
I've got a Bootstrap Navbar that is fairly basic and populated with image links over text. However, I'd like to also include a badge - IE, show the number of messages.
The problem is the badge position. It gets placed to the right, but I would prefer to justify it to the top-right relative to the image. It also directly affects the width and height of the link itself.
<li>
<a href="#">
<?= $this->Html->image('MessageIcon.png'); ?>
<span class="badge">42</span>
</a>
</li>
I have tried a few solutions that turned out to be fairly messy - forcibly setting the badge position, but ultimately they did not work too well. Does anyone have suggestions on how to handle badge position and link design in this case?
EDIT: To clarify, this is what I am trying to achieve:
Checkout this snippet
.icon.container a>img {
width: 40px;
}
.icon.container {
display: inline-block;
}
.badge-notify{
position: relative;
top: -10px;
left: -18px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<li class="icon container">
<a href="#">
<img src="https://cdn4.iconfinder.com/data/icons/ios7-active-2/512/Envelope.png">
<span class="badge badge-notify">3</span>
</a>
</li>
<ul>
I am using "bootstrap": "~3.3.4" inside the mean.js framework. The navbar dropdown menu does not have any problem opening and staying put when the dropdown icon is clicked on desktop. But after getting pushed to the staging server, clicking the icon on the iphone and samsung galaxy browsers no longer opens the dropdown menu or it sometimes opens it but it does not stay opened.
Here is the code:
<div class="landing-page-header">
<div class="navbar-header" >
<button class="navbar-toggle mytoggle" type="button" data-ng-click="toggleCollapsibleMenu()">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a data-ui-sref="home" class="navbar-brand">
<img class="header-logo" ng-src="modules/core/img/home/myimg.png" height="">
</a>
</div>
<nav class="collapse navbar-collapse" data-ng-show="!authentication.user" collapse="!isCollapsed" role="navigation">
<ul class="nav navbar-nav navbar-right landing-page-nav" data-ng-hide="authentication.user">
<li class="text-center" data-ng-repeat="item in menu.items | orderBy: 'position'"
data-ng-if="item.roles.indexOf('guest') !== -1"
ng-switch="item.type"
data-ng-class="{active: $state.includes(item.state)}"
class="{{item.class}}"
target="{{item.target}}"
dropdown="item.type === 'dropdown'">
<a ng-switch-when="dropdown" class="dropdown-toggle">
<span data-ng-bind="item.title"></span>
<b class="caret"></b>
</a>
<ul ng-switch-when="dropdown" class="dropdown-menu">
<li data-ng-repeat="subitem in item.items | orderBy: 'position'" data-ng-if="subitem.shouldRender(authentication.user);" data-ui-sref-active="active">
<a data-ui-sref="{{subitem.state}}" data-ng-bind="subitem.title"></a>
</li>
</ul>
<a ng-switch-default data-ui-sref="{{item.state}}" data-ng-bind="item.title"></a>
</li>
<li class="divider-vertical"></li>
<li class="text-center " data-ui-sref-active="active">
<a data-ui-sref="authentication.signin" target="_self">SIGN IN</a>
</li>
</ul>
</nav>
</div>
And Here is the CSS:
.landing-page-header {
position: fixed;
left: 0px;
top: 0px;
opacity: 0.9;
background: #111;
width:100%;
height: 5em;
z-index: 99;
margin-bottom: 10em;
}
.navbar-brand img {
/*background: #fff;*/
}
.landing-page-header ul {
background: #111;
margin-right:0.5em;
}
I had looked at other answers on this site and googled the issue. One answer I came across suggested to use a or input instead of button, but I still faced the same issue.
What is happening in the browser is that, on button click (hamburger) (on galaxy and iphone) immediately after the code is pushed to the staging server the navbar renders, but once a menu item is clicked, when you go back and click on the hamburger menu again, the navbar will behave weird starting to render and stopping and going back immediately.
Anyone has any idea?
I have found a solution for it myself. I just had to set the position of the drop down to "static" for screens less than 480px.
#media (max-width: 480px) {
.landing-page-header ul{
position: static;
width:100%;
}
}