Hi I want to know that whether can i reduce length of border bottom. I have a div and i have given border-bottom: 2px to that div i want to reduce the length of border. Is this possible.
I have this nav-bar and i have given css to its div want to reduce length of border. How can i do that.
This is my html
<div class="row">
<div class="col-sm-12 col-xs-12 col-lg-12 col-md-12 welcome">
<ul class="nav navbar-nav navbar-nav-primary">
<li class="active">
<a href="#one" data-toggle="tab">
<i class="fa fa-map-marker" aria-hidden="true"></i> <span class="li-text">Location</span>
</a>
</li>
<li>
<a href="#two" data-toggle="tab">
<i class="fa fa-heartbeat" aria-hidden="true"></i> <span class="li-text">Heartbeats</span>
</a>
</li>
<li>
<a href="#three" data-toggle="tab">
<i class="fa fa-power-off" aria-hidden="true"></i>
<span class="li-text">Reboots</span>
</a>
</li>
<li>
<a href="#four" data-toggle="tab">
<i class="fa fa-compress" aria-hidden="true"></i>
<span class="li-text">Reconnects</span>
</a>
</li>
<li>
<a href="#five" data-toggle="tab">
<i class="fa fa-battery-full" aria-hidden="true"></i>
<span class="li-text">Charge</span>
</a>
</li>
</ul>
</div>
This is my CSS
.welcome {
border-bottom: 2px solid #bcbcbc;
margin-left: 10px;
}
Move the welcome class into the ul tag and it should do what you want :)
remove the border-bottom css from the class welcome
and use this;
ul.nav.navbar-nav.navbar-nav-primary {
border-bottom: 2px solid #ddd;
}
.welcome {
margin-left: 10px;
}
You can use this for set height and width for set length
.welcome{
width:1000px;
border-bottom:1px solid magenta;
height:100px;
}
Related
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.
I have this unordered list and on phones with small screen width I want to place each 2 items on a single line, how can I implement that? thanks in advance.
<a href="mailto:shouman882#gmail.com" class="footer_link">
shouman882#gmail.com
</a>
<ul class="social_list">
<li class="social_list_item"> <a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">
</i>
</a> </li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="social_list_item"> <a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>
</a>
</li>
</ul>
You can do something like this, it will wrap last 2 items when screen size decreases.
.social_list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.first,
.second {
display: flex;
padding: 10px;
}
.first li,
.second li {
margin: 15px;
}
<a href="mailto:shouman882#gmail.com" class="footer_link">
shouman882#gmail.com
</a>
<ul class="social_list">
<div class="first">
<li class="social_list_item">
<a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>Facebook
</a>
</li>
<li class="social_list_item">
<a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">GitHub
</i>
</a>
</li>
</div>
<div class="second">
<li class="social_list_item">
<a class="social_list_item_link" href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i> Instagram
</a>
</li>
<li class="social_list_item">
<a class="social_list_item_link" href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>Whatsapp
</a>
</li>
</div>
</ul>
Just need to add width: 50%; float: left; to the .social_list_item class with suitable media queries. The sample for a small width screen.
Refer this : https://www.w3schools.com/css/css_rwd_mediaqueries.asp
/* You need to add suitable media queries for mobile devices. */
#media screen and (max-width: 480px) {
li.social_list_item {
width: 50%;
float: left;
}
}
<a href="mailto:shouman882#gmail.com" class="footer_link">
shouman882#gmail.com
</a>
<ul class="social_list">
<li class="social_list_item"><a class="social_list_item_link" href="https://www.facebook.com/samtshouman">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="social_list_item"><a class="social_list_item_link" href="https://github.com/SamShouman">
<i class="fab fa-github">
</i>
</a></li>
<li class="social_list_item"><a class="social_list_item_link"
href="https://instagram.com/sam_shmn98?igshid=1k437cycqmauk">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="social_list_item"><a class="social_list_item_link"
href="https://api.whatsapp.com/send?phone=96103943517&source=&data=&app_absent=">
<i class="fab fa-whatsapp"></i>
</a>
</li>
</ul>
I have a navbar which has 4 anchor tag buttons in the center (home, about, services, contact). I dont know how to center it on the navbar. I have another anchor tag on the far left of the navbar (a phone number link). It appears that the part I want to center is centered between the boundary of that far left link and the far right of the page.
I cant figure out how to center these 4 tags on the grid.
Hope that makes sense, im not too good with the jargon.
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<!-- Dropdown Cart Overview
<li>
<div class="dropdown">
<span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span>
<ul class="dropdown-list custom-content cart-overview">
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-item">
<a href="single-product.html" class="product-thumbnail">
<img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
</a>
<div class="product-details">
<a href="single-product.html" class="product-title">
Cotton Jump Suit
</a>
<span class="product-quantity">2 x</span>
<span class="product-price"><span class="currency">$</span>15.00</span>
</div>
</li>
<li class="cart-subtotal">
Sub Total
<span class="amount"><span class="currency">$</span>15.00</span>
</li>
<li class="cart-actions">
View Cart
<span class="icon-check"></span> Checkout
</li>
</ul>
</div>
</li> -->
<!-- Dropdown Search Module
<li>
<div class="dropdown">
<span class="icon-magnifying-glass"></span>
<div class="dropdown-list custom-content cart-overview">
<div class="search-form-container site-search">
<form action="#" method="get" novalidate>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type & hit enter...">
<span class="border"></span>
</div>
</div>
</div>
</form>
<div class="form-response"></div>
</div>
</div>
</div>
</li> -->
<li>
<div class="v-align-middle" style="margin-left: 60px;">
<i class="fab fa-facebook-f"></i>
</div>
</li>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</nav>
</div>
</div>
</div>
</header>
You can use floats to position elements side by side on the page and then play with the widths and padding to arrange them how you like. If you are unsure how to use CSS I suggest following some online tutorials.
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
nav ul li {
display: inline-block;
text-align: center;
width: 60px;
margin: 0px;
padding: 0px;
}
nav ul li span {
font-size: 0.7em;
}
nav ul li i {
font-size: 2em;
}
.left {
width: 40%;
float: left;
}
.right {
width: 60%;
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<nav>
<div class="left">
<p>000 000 0000</p>
</div>
<div class="right">
<ul>
<li><i class="fas fa-phone"></i><br><span>Contact</span></li>
<li><i class="fas fa-wrench"></i><br><span>Services</span></li>
<li><i class="fas fa-at"></i><br><span>About</span></li>
<li><i class="fas fa-home"></i><br><span>Home</span></li>
</ul>
</div>
</nav>
there is alot of existing css that came with this template. For me to run your css and html, it would change too many properties to the point where its unrecognizable. Despite that this is a perfect answer. HOWEVER: I took your css:
nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;
}
and i changed it to these values:
nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
}
Its centered. But now the container is vertically huge. Need it the original height
Screenshot
Ok lets start over. I just want to center these 4 anchor tag li's inside of this ul.
Is there someway I can wrap these four into one container, and then move them to the left with css? I just want those 4 items to appear centered in that ul.
Heres a picture of what im talking about
Below is my total header in html. Theres a lot of CSS so i dont know what to link people to but ill put what i have been playing with below.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}
There won't be as many as shown in the image below, but this shows it more obviously. I am looking to have a couple of font awesome icons that are overlaid with a bootstrap badge to indicate notifications. The two problems I am having are:
When each of the icons have a notification badge, there is too much spacing between them
When an icon does not have a notification badge, they are no longer evenly spaced as a set of icons.
The html:
<div class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-bell"></i>
<span class="notification-badge badge badge-danger">1</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-calendar-alt"></i>
<span class="notification-badge badge badge-danger">4</span>
</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-lg fa-list-alt notification-icon"></i>
{{--<span class="notification-badge badge badge-danger">2</span>--}}
</a>
</div>
<div class="nav-item">
<a class="nav-link" href="#" target="_blank" rel="noopener" aria-label="GitHub">
<i class="fa fa-lg fa-comment"></i>
{{--<span class="notification-badge badge badge-danger">1</span>--}}
</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-lg fa-envelope notification-icon"></i>
<span class="notification-badge badge badge-danger">2</span>
</a>
</div>
</div>
The CSS:
span.notification-badge {
position: relative;
top: -10px;
right: 10px;
border: $white 1px solid;
}
The rest is out-of-the-box Bootstrap 4.
Try a negative right margin that is the width of the badge, something like:
span.notification-badge {
position: relative;
top: -10px;
right: 10px;
border: $white 1px solid;
margin-right: -18px;
}
Play around with the margin-right and the .nav-item or .nav-link margins to get to where you wanna be.
I'm working on a footer for my website. I added social media logos from font-awesome and put it in the middle of my footer. When I added the links, the logos weren't in the middle anymore and you cannot see the links on the right side. I'm relatively new to HTML/CSS and I don't know how to fix it. What should I change that it looks like in the 2nd picture?
And how can I change the "px" in the CSS file into "%" that it looks same on every monitor?
Sorry if my English isn't the best, Thanks in advance. :)
What it looks like
What it should look like
My code:
footer {
position: absolute;
bottom: 0;
width: 100%;
position: fixed;
height: 40px;
background-color: #999999;
}
footer ul.footerleft{
margin-left: 150px;
margin-top: 10px;
}
footer ul.footerleft li{
display: inline;
margin-right: 25px;
}
footer a{
color: #222;
}
footer a:hover{
color: #ffffff;
text-decoration: none;
}
.social:hover {
-webkit-transform: scale(1.0);
-webkit-transition-duration: 0.5s;
}
.social {
-webkit-transform: scale(0.8);
color: #222;
}
<!-- footer -->
<footer class="footer">
<nav class="navbar navbar-default navbar-custom">
<div class="container-fluid">
<div class="nav navbar-nav navbar-left">
<ul class="footerleft">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
<div class="text-center center-block">
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
<div class="nav navbar-nav navbar-right">
<ul>
<li>
Link 4
</li>
<li>
Link 5
</li>
<li>
Text
</li>
</ul>
</div>
</div>
</nav>
</footer>
I got it to work by moving the navbar-right div to the top.
<footer class="footer">
<nav class="navbar navbar-default navbar-custom">
<div class="container-fluid">
<div class="nav navbar-nav navbar-right">
<ul class="footerright">
<li>
Link 4
</li>
<li>
Link 5
</li>
<li>
Text
</li>
</ul>
</div>
<div class="nav navbar-nav navbar-left">
<ul class="footerleft">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</div>
<div class="text-center">
<i id="social-fb" class="fa fa-facebook-square fa-3x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-3x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-3x social"></i>
</div>
</div>
</nav>
</footer>
Then added some css for the footerright:
footer ul.footerright{
margin-right: 150px;
margin-top: 10px;
}
footer ul.footerright li{
display: inline;
margin-right: 25px;
}