I can't seem to get scrollspy to work. I have a nav item inside a div item that is hidden at times. This nav item needs to have scrollspy working. I'm not sure if the problem is with the active class or something else. When clicking a link it doesn't change to active. Scrolling to the section doesn't work either.
main-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- can be dropped but must appear because of bootstrap warning -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>My title</title>
<link rel="stylesheet" href="styles.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"> </script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- JavaScript code for this page -->
<script src="main_page.js"></script>
</head>
<body>
<!-- A navbar that is always on top -->
<nav class="navbar navbar-expand-sm fixed-top">...</nav>
<div class="container-fluid">
<!-- Content that shows up when navigating to the site or when the logo is clicked -->
<div id="landing-page">...</div>
<!-- Shows all the Features of this product -->
<div id="features-page" hidden=true data-spy="scroll" data-target="features-navbar" data-offset="1">
<div class="jumbotron features-jumbotron text-center">
something
</div>
<!-- Navbar in question -->
<nav class="navbar navbar-expand-sm justify-content-center sticky-top" id="features-navbar">
<div class="gray-border">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link nav-button active" href="#lease-feature">Lease</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#finance-feature">Finances</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#organized-feature">Organized</a>
</li>
<li class="nav-item">
<a class="nav-link nav-button" href="#community-feature">Community</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="feature-item" id="lease-feature">
lease-feature
<br/>
<br/>
<br/>
<br/>
<br/>
lease-feature end
</div>
<div class="feature-item" id="finance-feature">
Finance
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Finance end
</div>
<div class="feature-item" id="organized-feature">
organized
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
organized end
</div>
<div class="feature-item" id="community-feature">
community-feature
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
community-feature end
</div>
end
</div>
</div>
</body>
</html>
styles.css
body {
padding-top: 110px;
}
nav{
background-color: white;
}
.nav-button{
color: black;
}
.active{
border-left: 2px solid black;
}
.gray-border{
border-top: .1px solid #d9d9d9;
border-bottom: .1px solid #d9d9d9;
}
.feature-item{
padding-top: 220px;
}
...
The problem was that I was missing a #, styling for the div data-spy and the active class belongs to the li tag.
<div id="features-page" hidden=true data-spy="scroll" data-target="#features-navbar" data-offset="1" style="overflow-y: scroll; height: 100vh; position:relative;">
Related
I need to make the name: Data Science in the header and in the footer i need to make
an a Steve Jacob. How can i make this, if i try it looks like wery bad it overlaps the left menu. There is how cite looks like:
There is my index.html:
Again, how can i make some notice in the footer and header which doesn't overlaps the left menu.
imgsize {
width: 30%;
height: 30%;
margin-left: 30%;
display: block;
}
<head>
<title>Главная</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div class="wrapper d-flex align-items-stretch">
<nav id="sidebar">
<div class="custom-menu">
<button type="button" id="sidebarCollapse" class="btn btn-primary">
<i class="fa fa-bars"></i>
<span class="sr-only">Toggle Menu</span>
</button>
</div>
<div class="p-4 pt-5">
<ul class="list-unstyled components mb-5">
<img class="imgsize" src="{% static 'media/logo.png' %}" alt="">
<li class="active">
Главная
</li>
<li>
Востребованность
</li>
<li>
География
</li>
<li>
Навыки
</li>
<li>
Последние вакансии
</li>
</ul>
<div class="footer">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</nav>
<!-- Page Content -->
<div id="content" class="p-4 p-md-5 pt-5">
<h2 class="mb-4">Sidebar #02</h2>
</div>
</div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/popper.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/main.js"></script>
</body>
<footer>
</footer>
This question already has answers here:
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 2 years ago.
I am facing an issue with the bootstrap 5 navbar. I am trying to create a responsive navbar with bootstrap 5. I want the navbar logo will be on the left side and the nav-links on the right side. But when I used the 'navbar-expand-lg' class it both aligns the logo and nav-links on the left side.
I used the ml-auto class in the ul tag. But it didn't work. Can anyone please help me?
Note: I think mr-auto and ml-auto classes are not working perfectly in bootstrap 5.
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<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="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav">
<ul class="navbar-nav ml-auto">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<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>
</body>
</html>
Yes, you are right. Negative margins are disabled by default but can be enabled in Sass by setting $enable-negative-margins: true. Read their Documentation: https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin
Or you can write in your custom CSS. Check my code -
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
.navbar-nav{
margin-left: auto !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<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="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="nav">
<ul class="navbar-nav">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<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>
</body>
</html>
I'm unable to get a custom CSS sheet to work in the navigation bar. I've an angular application, where I'm adding a CSS file to override the anchor tag colors inside the navbar. Since the freelancer css files I'm using have made the anchor tag white in color, and there's a place in the Nav bar HTML, where I want to use anchor tag in a readable color, I've written custom CSS file.
<!DOCTYPE html>
<html ng-app="jargoViewer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Jargo Foods Pvt Ltd.</title>
<link href="vendor/font-awesome/css/style.css" rel="stylesheet" type="text/css">
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Jargo CSS Styles -->
<link href="css/jargo.css" rel="stylesheet" type="text/css">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-cookies.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery.easing/js/jquery.easing.min.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<script src="js/freelancer.min.js"></script>
<script src="app.js"></script>
<script src="RestService.js"></script>
<script src="UserCart.js"></script>
<script src="ProdSearchService.js"></script>
<script src="ProductsSearchController.js"></script>
<script src="MainController.js"></script>
<script src="ProductController.js"></script>
<script src="NavController.js"></script>
<script src="CheckoutController.js"></script>
<script src="PaymentController.js"></script>
<script src="LoginModal.js"></script>
<script src="LoginModalCtrl.js"></script>
<script src="LoginService.js"></script>
<script src="CheckoutPaymentService.js"></script>
<script src="OrdersController.js"></script>
<script src="SessionInterceptor.js"></script>
<!-- Payment Gateway Lib -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</head>
<body id="page-top" class="index">
<div id="skipnav">Skip to main content</div>
<!-- Add the Navigation Bar on top -->
<div ng-include="'nav.html'"></div>
<!-- This is where the Actual Content would go -->
<div ng-view autoscroll="true"></div>
<!-- Add the footer at bottom -->
<div ng-include="'footer.html'"></div>
</body>
</html>
My CSS file is as follows (jargo.css). Notice the use of a new class called cart-table-link:
.cart-table-link a{
color: #FF8B03 !important;
}
.cart-table-link li a{
color: #FF8B03;
}
.cart-table-link li a:hover{
color: #18BC9C;
}
.cart-table-link li a:focus,
.cart-table-link li a:active{
color: #FF8B03;
}
.cart-table-link li.active a{
color: #FF8B03;
background: #18BC9C;
}
.cart-table-link li.active a:hover,
.cart-table-link li.active a:focus,
.cart-table-link li.active a:active{
color: #FF8B03;
background: #18BC9C;
}
My portion of nav.html, which contains a DropDown "Cart" Nav Element, which when clicked opens a Table with row entries for each product in the Cart, and finally, at the end, a "View Cart" and a "Checkout" anchor element. Each row entry in the Cart table contains an anchor tag with name of the Product Item, which if clicked should take user to the Product details page. Below is nav.html:
<!-- Navigation -->
<!--<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom"> -->
<nav id="mainNav" class="navbar navbar-default navbar-static-top navbar-custom">
<div class="container-fluid" ng-controller = "NavController">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Jargo Foods</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="hidden">
</li>
<li class="page-scroll">
Products
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Contact
</li>
<!-- Search Starts -->
<li>
<!--
<div class="col-sm-3 col-md-3 pull-right">
-->
<div>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" ng-model = "searchtext" class="form-control" placeholder="Search" name="srch-term" id="srch-term"/>
<div class="input-group-btn">
<button ng-click = "search()" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</li>
<!-- Cart Starts -->
<!--<div class="navbar-brand navbar-right">-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Cart
<span id="cart-total" ng-show ="userCart.cart_size">{{userCart.cart_size}} item(s)</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!--
<div >{{userCart.cart_products}}</div>
<div class="row" ng-repeat="obj in userCart.cart_prod_ids">{{obj}}</div>
<div class="row" ng-repeat="(id, obj) in userCart.cart_products">{{id}} {{obj}}</div>
-->
<li>
<!--
<table class="table table-striped hcart">
-->
<table>
<tbody>
<tr ng-repeat="(id, itemObj) in userCart.cart_products">
<td class="text-center">
<a ng-href="#/product/{{itemObj.ID}}">
<img src="img/others/cart.png" alt="image" title="image" class="img-thumbnail img-responsive"/>
</a>
</td>
<td class="text-left" class="col-md-2">
<a class="cart-table-link" ng-href="#/product/{{itemObj.ID}}">{{itemObj.ItemName}}</a>
</td>
<td class="text-right">x {{itemObj.Quantity}}</td>
<td class="text-right">₹ {{itemObj.Quantity * itemObj.CostPerUnit}}</td>
<td class="text-center">
<i class="fa fa-times" ng-click = "remInCart(itemObj.ID, 1)" ></i>
</td>
</tr >
</tbody>
</table>
</li>
<li>
<table class="table table-bordered total">
<tbody>
<tr>
<td class="text-right"><strong>Sub-Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val}}</td>
</tr>
<tr>
<td class="text-right"><strong>VAT (5.5%)</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 0.055 | number:2}}</td>
</tr>
<tr>
<td class="text-right"><strong>Total</strong></td>
<td class="text-left">₹ {{userCart.cart_val * 1.055 | number:2}}</td>
</tr>
</tbody>
</table>
</li>
<li>
<p class="text-right btn-block1">
View Cart
<a class = "button cart-table-link" href="#/checkout">Checkout</a>
</p>
</li>
</ul>
</div>
</ul>
</li>
</div> <!-- /.navbar-collapse -->
</nav> <!-- /.container-fluid -->
Just search for the reference to the cart-table-link in the nav.html file.
Despite the above changes, the cart-table-link CSS is most likely not even recognized. Notice the image (chrome inspection)
Any clue where I'm going wrong?
Your CSS is not correct.
The class cart-table-link is the a element.
a.cart-table-link {
color: #FF8B03;
}
I removed also the !important because having a.cart-table-link will have more hierarchy than the other styles that I saw.
I am trying to center a sentance in my Nav Bar (which uses bootstrap). The navbar so far looks like this:
Centered Navbar title
What I would like to do is have the "|" centered, with the text around it next to it, instead of just having the sentence centered. This is quite hard to explain, but I hope you understand what I mean - the "|" is centered, with text to the left and right, instead of the whole sentance being centered, where the middle letter is in the middle. I want the "|" to be in the middle.
I have tried centering the "|" and floating the text on the left to the right and the text to the right to the left, but that just made the text go completely to the right instead of stopping before the "|".
Use the snippet to view the code, but please use "Full Page" so it works properly...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
<?php echo $album_nm; ?>
</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
<div class="container" style="text-align: center;">
<div class="container" class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family: font71888;" class="navbar-brand page-scroll" href="#page-top">
<div style="display:inline-block; text-align: right;">
CHLOE
</div>
<div style="display:inline-block; float: none; margin: 0 auto;">
|
</div>
<div style="display:inline-block; text-align: left;">
<?php echo $album_nm; ?>
</div>
</div>
<!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#buy">Buy</a>
</li>
<li>
<a class="page-scroll" href="#story">My Story</a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#warchild">War Child</a>
</li>
<li>
<a class="page-scroll" href="#listen">Listen</a>
</li>
<li>
<a class="page-scroll" href="#thanks">Thanks</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Edit:
Thanks to Andrei Gheorghiu for his answer, this worked for me and looked really nice! I have marked his answer as correct and it is the one with the most upvotes at the moment...
Here's how I'd do it:
.navbar-brand {
display: flex;
}
.navbar-brand > div{
flex: 1 1 0;
padding: 0 4px;
}
.navbar-brand > div:first-child,
.navbar-brand > div:last-child{
flex-basis: 50%;
}
.navbar-brand > div:first-child {
text-align: right;
}
<div class="navbar-brand page-scroll" href="#page-top">
<div>CHLOE</div>
<div>|</div>
<div>This is a long album name</div>
</div>
P.S.: Don't forget to autoprefix your CSS before deploying.
And stop using inline style! How are you going to wrap your declarations in a #media query if they're inlined?
Here.
Note: If you don't want to count mobile menu button when centering text, just remove overflow: hidden property from div that wraps the text
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<link href="https://www.fontify.me/wf/da96db5dc1f0db255a8e71edaa0ace2d" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>
<?php echo $album_nm; ?>
</title>
<!-- Bootstrap Core CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesnt work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- -------------------------------------------------------------NAV BAR------------------------------------------------------ -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #1a1a1a;">
<div class="container" style="text-align: center;">
<div class="container" class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="font-family: font71888; float: none; overflow: hidden" class="navbar-brand page-scroll" href="#page-top">
<div style="display:block; text-align: right; width: 50%">
CHLOE |
</div>
<div style="display:block; text-align: left; width: 50%" >
<?php echo $album_nm; ?>
</div>
</div>
<!-- <a style="font-family: font71888;" class="navbar-brand page-scroll navbar-middle" href="#page-top"><br>CHLOE | <?php echo $album_nm; ?></a> -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="align: center; float: center; text-align: center;">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#buy">Buy</a>
</li>
<li>
<a class="page-scroll" href="#story">My Story</a>
</li>
<li>
<a class="page-scroll" href="#about">About Me</a>
</li>
<li>
<a class="page-scroll" href="#warchild">War Child</a>
</li>
<li>
<a class="page-scroll" href="#listen">Listen</a>
</li>
<li>
<a class="page-scroll" href="#thanks">Thanks</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
I am not sure why I can't view content beneath my navbar.All I get is blank in my in place of the <h1>Hello</h1>. Would appreciate some guidance for this code in particular, but also any resources to learn more about how to avoid this problem in the future.
<!DOCTYPE html>
<html>
<head>
<title>A random title piece.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="../static/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container pull-left">
<a class="brand" href="../">Things and Stuff </a>
<div class="nav-collapse collapse" id="main-menu">
<ul class="nav" id="main-menu-left">
<li class="divider-vertical"></li>
<li>
<form class="form-search">
<div class="input- append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">
Search
</button>
</div>
</form>
</li>
<li>
<a id="swatch-link" href="../popular">Example 1</a>
</li>
<li>
<a id="swatch-link" href="../sold">Example 2</a>
</li>
<li>
<a id="swatch-link" href="../new">Example 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Hello</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/json2.js"></script>
</body>
The content is hidden beneath your header .Wrap your content with a div with class container and than let us know .
Here is a jsfiddle
Jsfiddle with padding
<div class=".container">
<h1>Hellow world</h1>
</div>
And add the followingin your css
.container > h1
{
margin-top:70px;
}
Or you can use the following , I suggest using this one :
.container > h1{
padding-top:70px;
}