I am trying to design a header similar to OLX.IN, i am trying but it not working as i need.
I am googled and tried to code myself but it not matching the design i am planning.
Design i am trying :
Click to view the design
My Code :
.logo {
width: 50px;
margin-right: 20px;
}
.logo img {
width: 100%;
}
.location {}
.location input {
background-color: #fff;
border: 2px #002f34 solid;
border-radius: 5px;
}
.location .ico {
padding: 10px;
height: 100% !important;
background-color: #000 !important;
color: #fff;
border: none;
outline: inherit;
}
.search {}
.search input {
width: 100px;
background-color: #fff;
border: 2px #002f34 solid;
border-radius: 5px;
}
.search .ico {
padding: 10px;
height: 100% !important;
background-color: #000 !important;
color: #fff;
border: none;
outline: inherit;
}
.sell {
padding: 8px 20px;
border: 3px #ffa500 solid;
color: #002f34;
text-align: center;
background: #fff;
border-radius: 30px;
box-shadow: 0px 3px 5px #a9a9a9;
}
.login {
padding-right:10px;
text-decoration: underline;
font-size: 18px;
font-weight: bold;
}
.flex-1{
flex: 1;
}
.flex-2{
flex: 2;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand logo" href="#">
<img src={require("../ui/logo.png")} />
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-2 pr-3">
<li class="input-group input-group-lg location mr-4 flex-1">
<input type="text" class="form-control" placeholder="Pakistan" />
<div class="input-group-btn">
<button class="fas fa-search ico"></button>
</div>
</li>
<li class="input-group input-group-lg search flex-2">
<input type="text" class="form-control" placeholder="Find Mobile, Car ,laptop" />
<div class="input-group-btn">
<button class="fas fa-search ico"></button>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<h6 class="mr-sm-2 login" >Login</h6>
<button class="my-2 my-sm-0 fas fa-plus sell"> SELL</button>
</form>
</div>
</nav>
Can you help me with correct HTML and CSS tag or code to make a design which i want.
Related
I'm making a frontend to my API with angular&Bootstrap, and my body tag doesn't work.
Everything in my css file works, except the body.
I needed just to change the background of my page and thought it wouldn't be that difficult, but it simply doesn't work,
I tried using !Importante in css aswell, but nothing works.
How can I do it ?
my client-prod.component.html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<body id="body-id">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" style="color:white;">Products Manager</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
</div>
</nav>
<h1 style="color:white;">PRODUCTS</h1>
<div class="container" id="main-container">
<div class="row">
<div *ngFor="let cloudProduct of cloudProducts" class="col-md-4 mb-3">
<div class="card" style="background-color: rgba(218, 218, 218, 0.712); width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{cloudProduct?.productName}}</h5>
<div class="row">
<div class="col-md-12 text-center">
<span class="larger-text">{{cloudProduct?.priceInEuros}}€</span>
</div>
<div class="col-md-12 text-center">
<p class="card-text">{{cloudProduct?.createdAt}}</p>
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-success">
<i class="fa fa-shopping-cart"></i> Add to cart
</a>
</div>
</div>
</div>
</div>
</div>
</body>
my client-prod.component.css
#import 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
#import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
#body-id{
margin-top:20px;
background-color: black!important;
color: #000000 !important;
}
.larger-text{
font-size: 30px;
}
.card-body {
padding: 0;
}
.card-text {
margin: 10px 0;
}
.custom-class {
background-color: rgb(255, 255, 255);
}
.card-title{
font-size: 35px;
}
.card-footer a {
padding: 10px 20px;
margin: 10px;
font-size: 1.2em;
border-radius: 25px;
text-decoration: none;
}
.card-footer .btn-primary {
background-color: #007bff;
color: white;
}
.card-footer .btn-danger {
background-color: #dc3545;
color: white;
}
.m-t-text-righ{
font-size: 14px;
font-weight: 600;
color: #ffffff;
background-color: #1ab394;
padding: 6px 12px;
position: absolute;
}
.card {
border: solid 2px black;
border-radius: 15px;
box-shadow: 2px 2px 10px #ccc;
padding: 20px;
text-align: center;
margin-bottom: 60px;
}
When page loads, the background color of my navigation is transparent and when the page is scrolled background color of the navigation bar changes to the set color; its working fine on desktop view but when I minimize the window to mobile view, background color of the navigation bar remains transparent too BUT when I click the toggle button to open the navigation List items it still remains transparent, making it impossible to see the List Items.
Please how can I make the background color of navigation bar in mobile view to also be transparent on page load and when the toggle button is clicked, the background color of the nav bar changes?
Just as it is obtain in desktop view.
Here is my Javascript, CSS and HTML
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', '#32657c');
$('.nav-link').css('color', '#eeeeee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', '#32657c');
} else {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#011B33');
$('.navbar-brand').css('color', '#011B33');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#011B33');
$('#newclients').css('background', 'transparent');
}
});
</script>
<style type="text/css">
.wrapper {
background-repeat: no-repeat;
height: 1000px;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.top {
height: 100%;
background-size: cover;
background-color: rgb(245, 245, 245);
width: 100%;
z-index: 100;
}
.navbar-nav {
margin-left: auto;
}
#navbarNav li a {
color: #eeeeee;
font-family: 'Be Vietnam', sans-serif;
font-size: 11pt;
font-weight: bolder;
}
.nav-item {
float: right;
}
.navbar-nav .active {
color: #eeeeee;
}
#navbarNav li a::after:hover {
color: #eeeeee;
}
.navbar-brand:hover {
color: #eeeeee;
}
#media(min-width:992px) {
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right: 1px solid #200662;
border-left: 1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
}
#btnstart {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 12pt;
}
#btnstart:hover {
color: #eeeeee;
background-color: steelblue;
}
.img-circle {
border-radius: 50%;
float: left;
}
#imgone {
width: 100%;
height: auto;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#imgone {
width: 100%;
height: auto;
}
#boldhead {
font-size: 17pt;
}
}
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
#newclients {
font-family: 'Be Vietnam', sans-serif;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#qr {
display: none;
}
}
</style>
<div class="wrapper">
<div class="top">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="header" style="font-family: Nunito;">
<a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
<i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
<span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
<i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" style="font-weight: bolder;">
<i class="fas fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
<i class="fas fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
<i class="fas fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
</a>
</li>
<li class="nav-item">
<asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
</li>
</ul>
</div>
</nav>
<div>
<img id="dots" alt="dotted" src="images/curly.jpg" />
<div class="line" style="color: #fff;">
</div>
<div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
<div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
<br />
<div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
<label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
<br />
<p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
Start yourshopping for your kids anywhere and anytime!
</p>
<br />
<asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
<br />
<br />
</div>
</div>
<div class="col-sm-4" id="qr" style="margin: 0 auto;">
<div class="container-fluid p-3 mb5 bg-transparent rounded">
<i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="back-cont" style="background-color: #eeeeee;">
<div class="container-fluid" style="text-align: center; padding: 30px;">
</div>
<br />
</div>
<div class="contain" style="margin: 0 auto; padding: 10px;">
<br />
</div>
</div>
You can try this :
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$('.navbar').css('background', '#32657c');
$('.nav-link').css('color', '#eee');
$('.navbar-brand').css('color', '#eeeeee');
$('#newclients').css('color', '#eeeeee');
$('#newclients').css('border-color', '#eeeeee');
$('#newclients').css('background', '#32657c');
$('.navbar-nav').css('background','transparent')
} else {
$('.navbar').css('background', 'transparent');
$('.nav-link').css('color', '#000');
$('.navbar-brand').css('color', '#011B33');
$('#newclients').css('border-color', '#32657c');
$('#newclients').css('color', '#011B33');
$('#newclients').css('background', 'transparent');
$('.navbar-nav').css('background','rgb(245, 245, 245)')
}
});
.wrapper {
background-repeat: no-repeat;
height: 1000px;
background-position: center;
background-size: cover;
overflow: hidden;
position: relative;
}
.top {
height: 100%;
background-size: cover;
background-color: rgb(245, 245, 245);
width: 100%;
z-index: 100;
}
.navbar-nav {
margin-left: auto;
}
#navbarNav li a {
/*color: #eeeeee;*/
font-family: 'Be Vietnam', sans-serif;
font-size: 11pt;
font-weight: bolder;
}
.nav-item {
float: right;
}
.navbar-nav .active {
color: #eeeeee;
}
#navbarNav li a::after:hover {
color: #eeeeee;
}
.navbar-brand:hover {
color: #eeeeee;
}
#media(min-width:992px) {
.col-md-6:not(:first-child) {
}
.col-md-6:not(:last-child) {
border-right: 1px solid #200662;
border-left: 1px;
}
.form-horizontal {
line-height: 1.33;
letter-spacing: -.5px;
margin-bottom: 5px;
margin-top: 0%;
}
}
#btnstart {
border-radius: 5px;
background-color: #32657c;
font-weight: 500;
font-size: 12pt;
}
#btnstart:hover {
color: #eeeeee;
background-color: steelblue;
}
.img-circle {
border-radius: 50%;
float: left;
}
#imgone {
width: 100%;
height: auto;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#imgone {
width: 100%;
height: auto;
}
#boldhead {
font-size: 17pt;
}
}
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
#newclients {
font-family: 'Be Vietnam', sans-serif;
}
#media screen and (min-width: 360px) and (max-width:640px) {
#qr {
display: none;
}
}
#media screen and (min-width: 15px) and (max-width:768px) {
.navbar-nav
{
background-color:rgb(245, 245, 245);
color:#000;
width:100%;
}
.navbar-nav .nav-item a
{
color:#000;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="top">
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="header" style="font-family: Nunito;">
<a class="navbar-brand" href="Default.aspx" style="font-family: 'Renogare Soft', sans-serif; font-weight: 500; font-size: 16pt;">
<i class="fas fa-bowling-ball" aria-hidden="true" style="margin: 0 7px; font-size: 20pt; color: #44a6e8;"></i>Cosmic</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: transparent; border-color: none; font-size: 10pt; border-width: 0px; color: #fff;">
<span class="navbar-toggler-icon" style="font-size: 10pt; color: #fff;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="Default.aspx" style="font-weight: bolder;">
<i class="fa fa-home" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="About.aspx" style="font-weight: bolder;">
<i class="fa fa-address-card" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>about Us
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Contact.aspx" style="font-weight: bolder;">
<i class="fa fa-address-book" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="LoginForm.aspx" style="font-weight: bolder;">
<i class="fa fa-sign-in" aria-hidden="true" style="margin: 0 7px; font-size: 11pt;"></i>login
</a>
</li>
<li class="nav-item">
<asp:Button ID="newclients" runat="server" CssClass="btn" Font-Bold="true" Font-Size="10pt" Text="Create free account" />
</li>
</ul>
</div>
</nav>
<div>
<img id="dots" alt="dotted" src="images/curly.jpg" />
<div class="line" style="color: #fff;">
</div>
<div class="row" id="frontpage" style="width: 98%; margin: 0 auto; padding: 35px; top: 1%;">
<div class="col-sm-7" style="margin: 0 auto; padding: 5px;">
<br />
<div class="container" style="margin-top: 4%; padding: 0px; top: 8%;">
<label id="boldhead" style="font-family: Roboto; font-size: 7.0vmin; color: #002335; top: 6%; font-weight: 900;">Best Prices for your Kids</label>
<br />
<p id="secondhead" style="font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 13pt; color: #05214d;">
Start yourshopping for your kids anywhere and anytime!
</p>
<br />
<asp:Button ID="btnstart" runat="server" class="btn btn-lg btn-primary" PostBackUrl="~/SignUp.aspx" Text="Create an account" />
<br />
<br />
</div>
</div>
<div class="col-sm-4" id="qr" style="margin: 0 auto;">
<div class="container-fluid p-3 mb5 bg-transparent rounded">
<i class="fas fa-home" aria-expanded="true" style="margin: 0 auto; font-size: 290pt; color: #32657c; opacity: 0.9;"></i>
</div>
</div>
</div>
</div>
<br />
<br />
</div>
<div class="back-cont" style="background-color: #eeeeee;">
<div class="container-fluid" style="text-align: center; padding: 30px;">
</div>
<br />
</div>
<div class="contain" style="margin: 0 auto; padding: 10px;">
<br />
</div>
</div>
</body>
</html>
The buttons inside a dialog box is not appearing in JQuery UI Style whereas the outside buttons are getting stylised.
Here is my piece of code where i think i'm doing wrong-
$("#addSection").button().click(function(){
$('#sectionDialog').dialog({
buttons:{
"Add New Section":function(){},
"Cancel": function(){}}
});
});
Inside Dialog Box-
Here is the problem
Outside Dialog Box-
Appering perfectly outside dialog box
Edit:
My HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daily Tasks</title>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery/external/jquery/jquery.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
My CSS Code:
body{
background-color: #19456b;
}
h2{
text-align: center;
color: #d89216;
font-family:'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr{
margin: 0;
color: #d89216;
}
button:focus{outline:none !important;}
.container-fluid{
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255,214,75);
background-color: blanchedalmond;
}
ol li{
padding: 2px;
cursor: grabbing;
}
ol li:hover{
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox
{
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection
{
text-align: right;
margin: 12px 2px;
}
.addTask
{
text-align: right;
margin: 12px 2px;
}
#sectionDialog{
display: none;
}
#taskDialog{
display: none;
}
.ui-icon-close
{
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
Thanks is advance!
Consider adjusting your head like so:
<!-- CSS Stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="jquery/jquery-ui.min.css">
<link rel="stylesheet" href="styles.css" />
The order that they load in is important.
$(function() {
$("#addSection").button().click(function() {
$('#sectionDialog').dialog({
buttons: {
"Add New Section": function() {},
"Cancel": function() {}
}
});
});
});
body {
background-color: #19456b;
}
h2 {
text-align: center;
color: #d89216;
font-family: 'Times New Roman', Times, serif;
font-size: 2.4rem;
font-style: italic;
font-weight: 500;
margin: 10px 0;
}
hr {
margin: 0;
color: #d89216;
}
button:focus {
outline: none !important;
}
.container-fluid {
margin-top: 50px;
padding: 2px 15px;
width: 800px;
height: 600px;
border: 5px inset rgb(255, 214, 75);
background-color: blanchedalmond;
}
ol li {
padding: 2px;
cursor: grabbing;
}
ol li:hover {
background-color: #fad586;
border: 0.5px solid rgb(238, 148, 14);
}
.checkbox {
margin: 0 5px 0 3px;
cursor: pointer;
}
.addSection {
text-align: right;
margin: 12px 2px;
}
.addTask {
text-align: right;
margin: 12px 2px;
}
#sectionDialog {
display: none;
}
#taskDialog {
display: none;
}
.ui-icon-close {
margin-top: 0.5px;
margin-right: 3px;
transform: scale(1.5);
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container-fluid">
<h2>Daily Tasks</h2>
<hr width="100%" size="4">
<div class="addSection">
<button id="addSection">Add Section</button>
</div>
<div id="sections">
<ul id="main">
<li>Personal<span class='ui-icon ui-icon-close'></span></li>
<li>Work<span class='ui-icon ui-icon-close'></span></li>
</ul>
<ol id="personal">
</ol>
<ol id="work">
</ol>
</div>
<div class="addTask">
<button id="addTask">Add Task</button>
</div>
<div id="sectionDialog" title="Add a section">
<label for="section">Section Name:</label><input id="section" type="text">
</div>
<div id="taskDialog" title="Add a task">
<label for="task">Task Name:</label><input id="task" type="text">
</div>
</div>
I'm trying to implement something as simple as a scrollspy in Bootstrap 4 for my portfolio and it's driving me to despair. I've read the official documentation, I've done my research, and I can't get it to work. No error in console.
Added data-spy = "scroll" data-target = ". Navbar" data-offset = "50" to the body and the anchors of the navigation links are the same as the section ids.
It also added the popper, jquery and other scripts.
I have also tried implementing it with just JavaScript, without success.
I start to think that there is something else in my code that is interfering with this Bootstrap function, but I can't find it. If anyone can take a look at the code and tell me what I'm doing wrong, I appreciate it.
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="I'm a developer and audiovisual producer. Here I show my evolution, my work and my passion.">
<meta name="author" content="Pablo Herrero">
<title>Pablo Herrero | Developer | pabloherrero.me</title>
<!-- Bootstrap style sheet -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/121886ca53.js" crossorigin="anonymous"></script>
<!-- Touch icons -->
</head>
<body id="top" data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navbar -->
<nav id="navbar" class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#top">
<div id="h" class="align-self-center">H</div>
</a>
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#works">Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header id="header">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img src="img/pabloHerrero.jpg" alt="Pablo Herrero" id= "headerPhoto">
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h1>Pablo Herrero</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<h2>lore ipsum</h2>
</div>
</div>
</div>
</header>
<!-- About -->
<section id="about">
<div class="container d-flex">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<h2>Hi! I'm a developer and audiovisual producer.</h2>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 align-self-center">
<p>I learned to code in 2019 when I started my studies on development. I'm confortable using Java, SQL, HTML5, CSS3, Bootstrap 4 and GIT, although I'm always digging deep and learning new things. I'm currently working on JDBC, Swing, Android Studio, JavaScript and Python, and will start soon with TypeScript, Node.js and Angular. Here you can take a look at my projects and drop me a line with the contact form if you wish.</p>
</div>
</div>
</div>
</section>
<!-- Works -->
<section id="works">
<div class="container d-flex">
</div>
</section>
<!-- Contact -->
<section id="contact">
<div class="container d-flex">
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container-fluid">
<div class="row d-flex ">
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<small id="copy">© 2020 Pablo Herrero</small>
</div>
<div class="col-sm-12 col-md-6 col-lg-6 align-self-center">
<div id="social">
<i class="fab fa-twitter"></i>
<i class="fab fa-dev"></i>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-github"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Popper.js -->
<script src="node_modules/#popperjs/core/dist/umd/popper.min.js"></script>
<!-- Portfolio script -->
<script src="js/app.js"></script>
</body>
</html>
CSS:
/* Fonts */
#font-face {
font-family: 'fira_coderegular';
src: url('fonts/firacode-regular-webfont.woff2') format('woff2'),
url('fonts/firacode-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codebold';
src: url('fonts/firacode-bold-webfont.woff2') format('woff2'),
url('fonts/firacode-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'fira_codemedium';
src: url('fonts/firacode-medium-webfont.woff2') format('woff2'),
url('fonts/firacode-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* General */
body {
position: relative;
font-family: 'fira_coderegular';
letter-spacing: normal;
overflow-y: scroll;
background-color:#ffffff;
}
body::-webkit-scrollbar {
display: none;
}
/* Navbar */
#navbar {
min-height: 56px;
background-color: transparent;
border-bottom: none;
}
#navbar .navbar-toggler {
color: #000000;
}
#navbar .navbar-toggler:focus {
outline: none;
}
#h {
font-size: 25px;
font-family: 'fira_codebold';
text-align: center;
color: #000000;
outline: none;
}
#navbar .nav-link {
font-size: 14px;
font-family: 'fira_codemedium';
padding: 1rem 1.5rem;
text-align: center;
color:#ffffff;
background-color: #000000;
outline: none;
}
#navbar .nav-link:hover {
color: #bd93f9;
outline: none;
}
#navbar .nav-link:active {
color: #50fa7b;
outline: none;
}
#navbar #h:hover {
color: #bd93f9;
outline: none;
}
#navbar #h:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
#navbar .nav-link {
font-size: 14px;
padding: 0.5rem 1.5rem 0.5rem;
color:#000000;
background-color: transparent;
}
}
/* Header */
#header {
width: 100%;
height: 100vh;
}
#header .col-lg-12 {
text-align: center;
}
#header #headerPhoto {
margin: 100px 0px 0px 0px;
text-align: center;
max-width: 100%;
}
#header h1 {
margin: 50px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codebold';
font-size: 58px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
#header h2 {
margin: 15px 0px 0px 0px;
width: 100%;
text-align: center;
text-transform: uppercase;
font-family: 'fira_codemedium';
font-size: 24px;
letter-spacing: 0.05rem;
}
#media (min-width: 992px) {
#header #headerPhoto {
margin: 75px 0px 0px 0px;
max-width: 35%;
}
#header h1 {
margin: 25px 0px 0px 0px;
font-size: 64px;
line-height: 3.3rem;
letter-spacing: 0.05rem;
}
}
/* About */
#about {
width: 100%;
height: 100vh;
}
#about .container {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
#about .row {
background-color: #000000;
padding: 100px 100px 100px 100px;
}
#about .col-lg-12 {
text-align: center;
align-items: center;
}
#about h2 {
width: 100%;
text-align: left;
margin-bottom: 30px;
font-family: 'fira_codemedium';
font-size: 24px;
color: #ffffff;
letter-spacing: 0.05rem;
}
#about p {
width: 100%;
text-align: left;
font-family: 'fira_coderegular';
font-size: 14px;
color: #ffffff;
}
/* Recent works */
/* Contact */
/* Footer */
footer {
position: fixed;
bottom: 0;
width: 100%;
padding-bottom: 5px;
background-color: transparent;
color: #000000;
text-align: center;
}
footer #social a{
font-size: 15px;
color: #000000;
}
footer #social i:hover{
color: #bd93f9;
}
footer #social i:active {
color: #50fa7b;
outline: none;
}
#media (min-width: 992px) {
footer #copy {
float: left;
}
footer #social a{
font-size: 20px;
float: right;
padding: 0.5rem 2rem 0.5rem 0rem;
}
}
It seems to be working fine, but the correct CSS selector for showing the active nav-link is...
#navbar .nav-link.active {
color: #50fa7b;
outline: none;
}
https://codeply.com/p/1hcQLKYm19
Also note, the sections need height (or a lot of content) to see the menu changing between each section.
Probably you have just forgotten to include bootstrap script like
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
if you want to do it with pure js just add event listener for the scroll event
window.addEventListener("load", function(){
window.addEventListener('scroll', function(e) {
// your handler
console.log(window.scrollY);
});
});
for some reason my expanding search bar won't align properly with the other items on my navbar. It shows on top while sign in and sign out is pushed below. I want them all one line like the new stack overflow navbar. What is the problem?
Both css and html shown below:
body {
padding-top: 65px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Linkin Park</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">Link0 <span class="sr-only">(current)</span></li>
<li>Link1</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="form-group">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<li>Sign In</li>
<li>Sign Out</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Thank you very very very much in advance! :-D
You forgot to wrap the div within <li></li>.
Working snippet
body {
padding-top: 65px;
}
.form-group {
padding-top:10px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Linkin Park</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">Link0 <span class="sr-only">(current)</span></li>
<li>Link1</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="sear"><div class="form-group">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div></li>
<li>Sign In</li>
<li>Sign Out</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Take look at this, search form and 'Sign In', 'Sign Out' links are in one line. I've changed you html bit, as tag can't hold tags.
body {
padding-top: 65px;
}
.search-form-holder {
margin: 0;
padding-top: 10px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Linkin Park</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">Link0 <span class="sr-only">(current)</span></li>
<li>Link1</li>
</ul>
<div class="form-group navbar-right search-form-holder">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Sign In</li>
<li>Sign Out</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>