Responsive bootstrap menu issues - html

So my app has a primary menu and then once a user is logged in, a secondary menu. Works fine and looks fine with full size (first image shown). When my app hits its media queries as shown in code below, thats why things are getting messed up and despite my best efforts, I am having issues. Let me show images and then tell more of what is happening after.
So at full screen with user logged in, both menus show as:
But then when go to a tablet size of 768px in width, this is where the issues start. You can see that the drop down arrow not right for top menu, and secondary menu, no arrow at all. You can also see that the text that shows for the top menu has a bad z-index despite my updates and changes.
So my menu (outside of the angular injection for what shows) is mainly in the index.html for the top menu, then the secondary (as shown in the code) gets brought in via a partial.
<div class="navbar navbar-inverse" role="navigation" ng-controller="indexController" style="border-bottom: #ab2328 3px solid;">
<div class="container">
<div class="navbar-header">
<button class="btn btn-success navbar-toggle" ng-click="navbarExpanded = !navbarExpanded">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<a ng-show="!isSWA" class="navbar-brand" href="http://www.naviabenefits.com" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
<a ng-show="isSWA" class="navbar-brand" href="http://pebb.naviabenefits.com/" target="_blank"><img style="height: 37px;" src="ppt/assets/navia.png"></a>
</div>
<div class="collapse navbar-collapse" collapse="!navbarExpanded">
<!-- pebb main nav -->
<ul ng-show="isSWA" class="nav navbar-nav navbar-right" >
<li ng-show="authentication.isAdmin">admin</li>
<li>benefits we offer</li>
<li>enrollment</li>`
<li>forms</li>
<li>faq</li>
<li>IIAS merchant list</li>
<li>about us</li>
<li>contact us</li>
<li ng-show="authentication.isAuth"><a id="signOut" href="#/logout">log out <i class="fa fa-sign-out"></i></a></li>
</ul>
<ul ng-show="!isSWA" class="nav navbar-nav navbar-right">
<li ng-show="authentication.isAdmin">admin</li>
<li>products + services</li>
<li>about us</li>`
<li>testimonials</li>
<li>careers</li>
<li>news</li>
<li>blog</li>
<li>contact us</li>
<li ng-show="authentication.isAuth"><a id="signOut" href="#/logout">log out <i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="navbar navbarSecondary navbar-inverse" role="navigation" ng-controller="indexController" ng-show="authentication.isAuth">
<div class="container">
<div ng-include="'ppt/views/menu.html'">
</div>
</div>
</div>
<div class="container-fluid">
<div ng-view="">
</div>
</div>
You can see in the div with the ng-include, I am calling the partial and that code is:
<div class="navbarSecondary collapse navbar-collapse" collapse="!navbarExpanded">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/pptHome">
Participants Home
</a>
</li>
<!-- secondary menu for SWA -->
<li class="dropdown" ng-show="isSWA">
<a href="http://pebb.naviabenefits.com/benefits/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Benefits We Offer
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="http://pebb.naviabenefits.com/benefits/health-care-fsa/" target="_blank" >
Medical Flexible Spending Arrangement
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/benefits/dependent-care-assistance-program/" target="_blank" >
Dependent Care Assistance Program
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/benefits/fsa-vs-hsa/" target="_blank" >
FSA vs. HSA Comparison
</a>
</li>
</ul>
</li>
<li class="dropdown" ng-show="!isSWA">
<a href="https://www.naviabenefits.com/participants/benefits/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Benefits & Info
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="https://www.naviabenefits.com/participants/benefits/health-care-fsa/" target="_blank" ng-show="hasMenuBenefit('HealthCare')">
Health Care FSA
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/day-care-fsa/" target="_blank" ng-show="hasMenuBenefit('DayCare')">
Day Care FSA
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/limited-health-care/" target="_blank" ng-show="hasMenuBenefit('Limited')">
Limited Health Care FSA
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/hsa/" target="_blank" ng-show="hasMenuBenefit('HSA')">
Health Savings Account (HSA)
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/gonavia-commuter-benefits/" target="_blank" ng-show="hasMenuBenefit('GoNavia')">
GoNavia Commuter Benefits
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/health-reimbursement-arrangement/" target="_blank" ng-show="hasMenuBenefit('HRA')">
Health Reimbursement Arrangement (HRA)
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/dental-reimbursement-plan/" target="_blank" ng-show="hasMenuBenefit('DirectReimb')">
Direct Reimbursement Plan
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/benefits/cobra/" target="_blank" ng-show="hasMenuBenefit('COBRA')">
COBRA
</a>
</li>
</ul>
</li>
<!-- secondary menu for SWA -->
<li class="dropdown" ng-show="isSWA">
<a href="http://pebb.naviabenefits.com/tools/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Tools & Resources
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="http://pebb.naviabenefits.com/benefits/expenses/" target="_blank">
Expenses
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/tools/navia-benefits-card/" target="_blank">
Navia Debit Card
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/tools/mynavia-mobile-app/" target="_blank">
MyNavia Mobile App
</a>
</li>
<li>
<a href="http://pebb.naviabenefits.com/tools/tax-savings-calculator/" target="_blank">
Tax Savings Calculator
</a>
</li>
</ul>
</li>
<li class="dropdown" ng-show="!isSWA">
<a href="https://www.naviabenefits.com/participants/resources/" target="_blank" class="dropdown-toggle" data-toggle="dropdown">
Tools & Resources
<span class="caret">
</span>
</a>
<ul class="dropdown-menu sub-menu">
<li>
<a href="https://www.naviabenefits.com/participants/resources/expenses/" target="_blank">
Expenses
</a>
</li>
<li ng-show="hasMenuBenefit('BenefitCard')">
<a href="https://www.naviabenefits.com/participants/resources/benefits-card/" target="_blank">
Navia Benefits Debit Card
</a>
</li>
<li ng-show="hasMenuBenefit('MobileApp')">
<a href="https://www.naviabenefits.com/participants/resources/mynavia-app/" target="_blank">
MyNavia Mobile App
</a>
</li>
<li ng-show="hasMenuBenefit('FlexConnect')">
<a href="https://www.naviabenefits.com/participants/resources/flex-connect/" target="_blank">
FlexConnect
</a>
</li>
<li ng-show="hasMenuBenefit('OnlineClaim')">
<a href="https://www.naviabenefits.com/participants/resources/online-claim-submission/" target="_blank">
Online Claim Submission
</a>
</li>
<li ng-show="hasMenuBenefit('OnlineSubst')">
<a href="https://www.naviabenefits.com/participants/resources/online-debit-card-substantiation/" target="_blank">
Online Debit Card Substantiation
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/tax-savings-calculator/" target="_blank">
Tax Savings Calculator
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/tutorial-videos/" target="_blank">
Tutorial Videos
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/faq/" target="_blank">
FAQ
</a>
</li>
<li>
<a href="https://www.naviabenefits.com/participants/resources/forms-documents/" target="_blank">
Forms & Documents
</a>
</li>
</ul>
</li>
</ul>
</div>
And finally, with my over rides to bootstrap for color, font, etc..., my CSS is as (took out the media breakpoints as none were working as expected):
.navbar {
background-color: #ffffff;
height: 60px;
color: #000000;
font-size: 15px;
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
border: none;
margin-bottom: 0px;
}
.navbarSecondary {
background-color: #ab2328;
height: 66px;
color: #000000;
padding-left: 0px;
}
.navbarSecondary > li.dropdown.open > ul {
background-color: #2dccd3;
color: #ffffff;
}
.navbar.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a:hover, .navbar.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a:active, .navbar.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a:focus {
background-color: #68070b;
}
.navbarSecondary.navbar-inverse.ng-scope > div > div > div > ul > li > a {
font-size: 20px;
padding: 20px 25px 20px 25px;
color: #ffffff;
}
#signOut {
padding: 6px 10px;
background-color: #ab2328;
color: #ffffff;
margin-top: 10px;
}
#signOut:hover, #signOut:active {
background-color: #68070b;
}
.sub-menu {
background-color: #2dccd3;
padding-top: 18px;
padding-bottom: 18px;
}
.sub-menu > li > a {
color: #ffffff;
font-size: 12px;
line-height: 15.6px;
padding: 8px 25px 8px 40px;
}
.sub-menu > li > a:hover {
background-color: #24a4a9;
color: #ffffff;
}
.navbar-inverse .navbar-nav > li >a {
color: #2d3130;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:active {
color: #ab2328;
}
I have tried asnd tried using chrome dev tools and setting media breakpoints to no avail to get this work. Am hoping some of you can chime and in give some help. Is much appreciated.

Related

In iphone safari and chrome brower z-index is not working. background overlapping issue in side navbar

Screenshot
In my project I am facing a issue only on IOS mobile content of the page is overlapping over my navsidebar but working perfectly fine on other devices.
You can check the live url of my site below:
https://webapp.world
Attached CSS and Html code of my angular project for your reference
Thanks in advance.
.
.pushNav {
height: 100%;
position: fixed;
top: 0;
z-index: 10000;
overflow: hidden;
background: #2e2f35;
transition: ease-in-out 0.5s;
}
.pushNav hr {
border: 1px solid #555;
}
.pushNav,
.pushNav a {
font-size: 1rem;
font-family: helvetica, sens-serif;
font-weight: 100;
color: #fff;
text-decoration: none;
}
.pushNavIsOpen {
overflow: auto;
height: 100%;
}
.js-topPushNav.isOpen,
.pushNav_level.isOpen {
right: 0;
}
.closeLevel,
.openLevel {
cursor: pointer;
}
.openLevel,
.closeLevel,
.pushNav a {
padding: 1em 1em;
display: block;
text-indent: 5px;
transition: background 0.4s ease-in-out;
}
.openLevel:hover,
.closeLevel:hover,
.pushNav a:hover {
background: #494a50;
}
.openLevel span {
padding: 0 1rem;
}
.hdg {
background-color: #1e1e24;
}
.closeLevel,
closelevel > i {
font-size: 1em;
color: #a5a5a4;
}
.burger {
overflow: hidden;
text-align: end;
cursor: pointer;
background-color: #eeeded !important;
-webkit-transform: translate3d(0, 0, 1px);
transform: translate3d(0, 0, 1px);
z-index: 9;
transition: top 0.3s;
}
.burger i {
font-size: 2.5em;
color: #ae0000;
}
Angular html code
<nav>
<ul class="pushNav js-topPushNav">
<li class="closeLevel js-closeLevelTop hdg">
<!-- <i class="fa fa-close"></i> -->
<i class="bi bi-x-circle"></i>
</li>
<!-- company -->
<li>
<!-- Begin section 1 -->
<div class="openLevel js-openLevel">
<!-- <span> <i class="bi bi-gear-wide-connected"></i></span> -->
Services
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li>
<div class="openLevel js-openLevel">
Mobile App Development
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="mobile-app-development"
>Mobile App Development</a
>
</li>
<li>
<a routerLink="mobile-app-development/ios-application"
>iPhone App Development</a
>
</li>
<li>
<a routerLink="mobile-app-development/IOS-app-developmentq"
>Android App Development</a
>
</li>
<li>
<a routerLink="mobile-app-development/Flutter-app-development"
>Flutter App Development</a
>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
Web Development
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="web-app-development">Web Development</a>
</li>
<li>
<a routerLink="web-app-development/ReactJS-development"
>ReactJs Development</a
>
</li>
<li>
<a routerLink="web-app-development/Angular-development"
>Angular Development</a
>
</li>
<li>
<a routerLink="web-app-development/php-development"
>PHP Development</a
>
</li>
<li>
<a routerLink="web-app-development/laravel-development"
>Laravel Development</a
>
</li>
<li>
<a routerLink="web-app-development/NodeJS-development"
>NodeJs Development</a
>
</li>
<li>
<a routerLink="web-app-development/Python-Django-development">
Django/Python Development</a
>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
Game Development
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="game-app-development">Game Development</a>
</li>
<li>
<a routerLink="game-app-development/IOS-game-development"
>IOS Game Development</a
>
</li>
<li>
<a routerLink="game-app-development/Android-game-development"
>Android Game Development</a
>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
User Experience
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li style="background: #ae0000">
<a routerLink="user-experience">User Experience </a>
</li>
<li>
<a routerLink="user-experience/wireframe-design">Wireframe</a>
</li>
<li>
<a routerLink="user-experience/ui-ux-design">UI/UX Design</a>
</li>
</ul>
</li>
<li>
<div class="openLevel js-openLevel">
Latest Technologies
<i class="fa fa-chevron-right"></i>
</div>
<ul class="pushNav pushNav_level js-pushNavLevel">
<li class="closeLevel js-closeLevel hdg">
<i class="fa fa-chevron-left"></i>
Back
</li>
<li class="closetab" style="background: #ae0000">
<a routerLink="/latest-app-trends">Latest Technologies </a>
</li>
<li class="closetab">
<a routerLink="/latest-app-trends/IOT-development">IOT</a>
</li>
<li class="closetab">
<a routerLink="latest-app-trends/Blockchain-development"
>Blockchain</a
>
</li>
<li class="closetab">
<a routerLink="/latest-app-trends/augmented-virtual-Reality"
>AR/VR</a
>
</li>
</ul>
</li>
</ul>
</li>
<li class="">
<a
class="nav-link quote_btn"
[routerLink]="'/apply'"
routerLinkActive="active-link"
>Get Quote</a
>
</li>
</div>
</ul>
</nav>
Hey Use this Another Method
-webkit-transform: translate3d(0,0,1px);
transform: translate3d(0,0,1px);
TRY THIS
Z-index should be set for elements on the same level.
You should set the z-index on the parent's elements so that they will not be reset by their parent's z-index.
To fix your issue, you could set the z-index of #main-wrapper which is the parent of .pushNav to any number that is higher than <app-home>. Here's what I've tried on my device.

How can i make active background color for two elements in nav menu

I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}

Add a bottom border and icon to my footer

I am working on a responsive footer and I was able to get everything working. The layout is where there is a small issue. I am not able to get the bottom border after each li field and also not able to get the icon at the end. This is what I have done so far. Kindly let me know what I am missing.
#media all and (max-width: 979px) {
.brand-logos{
margin: 0 auto !important;
padding: 10px !important;
}
footer nav ul{
display:block !important;
margin: 0 auto !important;
}
footer nav ul li{
display:inline-block;
margin: 0 auto !important;
padding: 0 !important;
}
footer nav ul li img{
margin: 20px auto !important;
width: 70% !important;
display: block !important;
}
footer .footer-navigation .container-inline-css{
width: 100% !important;
padding:10px !important;
margin:0 !important;
border-bottom: 1px solid #77777A !important;
}
footer .footer-navigation .container-inline-css span{
margin: 0 !important;
padding: 0px !important;
cursor: pointer !important;
}
footer .footer-navigation div.container-inline-css ul{
max-height: 0 !important;
overflow: hidden !important;
padding: 0 20px !important;
}
footer .footer-navigation div.container-inline-css.active ul{
max-height: 10000px !important;
}
}
<div class="footer-navigation">
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CONTACT INFO</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="null" target="_blank">
<span class="icon-bg icon-phone"> </span>Call 1-800-STERLING</a>
</li>
<li><a href="/contact-us" target="_self">
<span class="icon-bg icon-contact"></span> Contact Us</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>OUR COMPANY</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="http://www.annsacks.com/" target="_blank">
About Us</a>
</li>
<li><a href="http://www.kallista.com/home.kls" target="_blank">
E-Newsletter Sign Up</a>
</li>
<li><a href="http://www.robern.com/home.rbn" target="_blank">
Careers</a>
</li>
<li><a href="/press-releases" target="_self">
Press Room</a>
</li>
<li><a href="http://www.kohler.com/corporate/index.html" target="_blank">
Kohler Co.</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>RESOURCES</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/litrature" target="_self">
Literature</a>
</li>
<li><a href="https://www.youtube.com/channel/UCMMnMReFTMuI9bpoctNGPkw/videos" target="_blank">
Merchandise</a>
</li>
<li><a href="null" target="_blank">
FAQs</a>
</li>
<li><a href="null" target="_blank">
Glossary</a>
</li>
<li><a href="null" target="_blank">
Tech Documents</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>CUSTOMER CARE</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="/cad-symbols" target="_self">
Track Your Order</a>
</li>
<li><a href="http://www.inspiracionkohler.com/" target="_blank">
Care & Cleaning</a>
</li>
<li><a href="null" target="_blank">
Warranties</a>
</li>
<li><a href="null" target="_blank">
Videos</a>
</li>
<li><a href="null" target="_blank">
Product Registration</a>
</li>
</ul>
</div>
<div class="container-inline-css">
<span class="koh-nav-section-title footer-link-title-text">
<span>SOCIAL</span>
</span>
<ul class="koh-nav-section-items footer-link-items-text">
<li><a href="https://www.facebook.com/kohlermexico" target="_blank">
<span class="icon-bg icon-social-facebook"></span>Facebook</a>
</li>
<li><a href="https://www.instagram.com/kohlerco/?hl=en" target="_blank">
<span class="icon-bg icon-social-instagram"></span>Instagram</a>
</li>
<li><a href="https://www.youtube.com/user/kohler" target="_blank">
<span class="icon-bg icon-social-pinterest"></span>Pinterest</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-youtube "></span>YouTube</a>
</li>
<li><a href="null" target="_blank">
<span class="icon-bg icon-social-houzz"></span> Houzz</a>
</li>
</ul>
</div>
</div>
I have all the functionality in place, expect for the bottom border of the li elements and also the arrow icon at the end. Any help is appreciated.
1) You use the footer tag as your CSS selector, but there is no footer tag in your HTML code.
2) You haven't set any border to your li tags. You can accomplish that by adding to your css
.koh-nav-section-items li {
border-bottom: 1px solid #fff;
}
you should be able to add border to the bottom of each li element. If you want to exclude the last element you can add
.koh-nav-section-items:last-of-type {
border-bottom: none;
}
a tip: try to avoid using !important
note: If you can provide a codepen link to your app, it would be much easier

Having a background without moving the letter's position

I want to add a button background to the "a" without moving its position.
The table B is almost correct except that you move the "a" the right side.
I don't know how to do it.
You also need to take account to the I also need to change the size of the width in the future.
Thanks!
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
Try to give negative left margin
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
margin-left:-30px;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
Setting the span to inline-block doesn't help so change that to inline. Then remove the 8px padding and you're done.
If you want the text to remain in the same place but also keep it centered inside the background, you could shift it back with a CSS transform (equal to width/2 - horizontal padding/2):
#testtesttesttest {
transform: translateX(calc(-50% + 4px));
}
Here's a JSFiddle to show the effect. Try changing around the width, and you'll see the text still stays in the same place. Hope this helps! Let me know if you have any questions.

Bootstrap brand isn't centering vertically in navbar

i'm having trouble centering my branding logo vertically in the center. As of right now my rendered html looks like this:
<a class='navbar-brand' href='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
If I don't set the height to a size, it will be the full size of the png. But my branding isn't vertically center with the rest of my navbar.
My css for the navbar-brand looks like this:
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
background-color: transparent;
}
What do I need in my css to make this center with the navbar?
This is the full render of the navbar, pulled right from bootstrap docs.
<nav class='navbar navbar-default' role='navigation'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href='#'>
<img alt="brand" height="200%" src="/assets/logo.png" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'>
<a href='#'>Link</a>
</li>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left' role='search'>
<div class='form-group'>
<input class='form-control' placeholder='Search' type='text'>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li>
<a href='#'>Link</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Dropdown
<span class='caret'></span>
</a>
<ul class='dropdown-menu' role='menu'>
<li>
<a href='#'>Action</a>
</li>
<li>
<a href='#'>Another action</a>
</li>
<li>
<a href='#'>Something else here</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
You can try use absolute positioning:
.navbar-brand {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: // half the width of your img
}