I'm having some trouble getting Font Awesome and Glyphicons the same side in my side bar menu. I'm unsure how to target the elements to set a specific font size?
A snip of the side bar code.
<div class="col-md-3 md-margin-bottom-40">
<ul class="list-group sidebar-nav-v1" id="sidebar-nav">
<li class="list-group-item list-toggle active">
<a aria-expanded="true" class="" data-parent="#sidebar-nav" data-toggle="collapse" href="#collapse-group-6">My Account</a>
<ul aria-expanded="true" class="collapse in" id="collapse-group-6" style="">
<li class="my_account_links_inactive">
<a class="user_links" href="index.php?a=4&b=12">
<div class="my_account_icons">
<i class="fa fa-print"></i>
</div>print signs and flyers</a>
</li>
<li class="my_account_links_inactive">
<a class="user_links" href="store/The-Parts-Network.html">
<div class="my_account_icons">
<i class="glyphicons white shop"></i>
</div>my storefront</a>
</li>
</ul>
</li>
</ul>
</div>
I think I need something like this?
#sidebar-nav > li > ul > li > a > div > i [class*="fa-"],
#sidebar-nav > li > ul >li > a > div > i[class*="glyphicon-"] {
font-size: 16px;
}
This CSS should work to target the #sidebar-nav icons only:
#sidebar-nav i.glyphicons, #sidebar-nav i.fa {
font-size: 16px;
}
Related
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.
I am learning responsive menus and by googling, i got the hamburger checkbox hack.
What i am trying to do is show only direct descendants by clicking the hamburger and hide the sub menus.
#toggle-menu {
cursor: pointer;
}
#primary-nav,
#menu-toggle,
#primary-nav>ul {
display: none;
}
#menu-toggle:checked+#primary-nav {
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle">
<ul id="primary-nav">
<li>home</li>
<li>dropdown
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
Any help will be appreciated
To only show the ul after the input, you need to hide all uls, then only show the ul directly after a checked input
You can then add a class on all the inputs and do the same for the submenu.
#toggle-menu {
cursor: pointer;
}
.toggler, /*checkboxes a class of toggler and hide */
ul { /* hide all menus (you may want to give them all a class) */
display: none;
}
.toggler:checked+ul { /* only show a ul if it is directly after a checked toggler input */
display: block;
}
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
<a href="#">
<h1>Company</h1>
</a>
<label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
<input type="checkbox" id="menu-toggle" class="toggler">
<ul id="primary-nav">
<li>home</li>
<li>
<label for="sub-menu1">dropdown</label> <!-- use a label and target the checkbox below -->
<input type="checkbox" class="toggler" id="sub-menu1"> <!-- add this -->
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
</div>
Hi i have small problem with CSS that dont know how to resolve.
On my WHMCS template i wanted to implement one element more, and now one element goes in row bellow (Get support). How to fix this?
This is CSS from that element:
.home-shortcuts {
margin: 0;
/*background:#25a2c7;*/
background: #5E35B1;
padding-left: 250px;
margin-top: -60px;
color: #fff
}
and this is code from header.tpl file
<div class="col-sm-12 col-md-8">
<ul>
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-headphones"></i>
<p>
Créer une radio <span>»</span>
</p>
</a>
</li>
{if $registerdomainenabled || $transferdomainenabled}
<li>
<a id="btnBuyADomain" href="domainchecker.php">
<i class="fa fa-globe"></i>
<p>
{$LANG.buyadomain} <span>»</span>
</p>
</a>
</li>
{/if}
<li>
<a id="btnOrderHosting" href="cart.php">
<i class="fa fa-hdd-o"></i>
<p>
{$LANG.orderhosting} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnMakePayment" href="clientarea.php">
<i class="fa fa-credit-card"></i>
<p>
{$LANG.makepayment} <span>»</span>
</p>
</a>
</li>
<li>
<a id="btnGetSupport" href="submitticket.php">
<i class="fa fa-envelope-o"></i>
<p>
{$LANG.getsupport} <span>»</span>
</p>
</a>
</li>
</ul>
</div>
Some advice how to show all in one row?
You can see that your li elements are 24% width. Reduce them to 20% (100 / 5 = 20, and you have five items in your list). That's it.
.home-shortcuts li {
width: 20%;
}
Add
.home-shortcuts{padding-left:0;}
.home-shortcuts .container{width:60%;}
.home-shortcuts li {
width: 20%;
}
make col-md-12 instead of col-md-8 it'll come fine
navigation image here
how can i disable the green color there whenever i click in gallery page?
Home
<li class="dropdown mega-dropdown">
<a class="dropdown-toggle" href="Gallery.aspx">Gallery<span class="caret"></span></a>
<div class="pc-nav">
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left; visibility:hidden;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
CSS here
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
I assume the current class indicates the column you have selected. Given the markup you provided in the comments, you can rewrite the rule like this to remove the background color:
.current {
background-color: transparent;
}
If you do not have access to the original code but wish to override it, you can supersede the background-color property like this:
.current {
background-color: transparent !important;
}
But in the end, if you don't wish there to be any special background color for the current column, you can just delete the entire block of code.
EDIT
Based on your feedback, I assume you want to highlight the names of the countries in the list but not the first item of the list. In that case, you can target them like this:
ul.dropdown-menu ul li:not(.dropdown-header) {
background-color: #00b200;
}
For some weird reason i cant change the background of the entire list item even though i selected the list.
Here is the code:
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
<style>
.project-item>ol>li:hover {
background-color: #eee;
}
</style>
The code you posted works fine. See this example.
.project-item>ol>li:hover {
background-color: #eee;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
This code seems to work.
Change the colors its pretty hard to see a gray color on a white background.
.project-item ol li:hover {
background-color: firebrick;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
I resolved the issue by removing float left on first span and just having a float right. That seemed to work.