I am using Bulma CSS (Ver. 0.9.4) for a responsive top and fixed navigation bar with dropdown and custom background color. Below is the code and the css. I dont know any javascript or jquery. My problem is:
1) The link with dropdown item does not have the same hover effect as the other links. How to have the same hover and text-color effect for the dropdown item?
2) How can I retain the same css style (background and hover) effect when on mobile mode?
3) The script tag has both javascript and jquery code. I had like to have either javascript or jquery code to help me understand the code better for future also.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Index</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #7e909a;
}
.bg-color {
background-color: #488a99;
}
.navbar-item {
color: white;
}
.box-shadow-y {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
}
.brandlogo {
margin-right: 10px;
}
</style>
</head>
<body>
<nav class="navbar bg-color box-shadow-y" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="water_elements.svg" width="40" height="64" /> BrandName
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span class="has-text-white" aria-hidden="true"></span>
<span class="has-text-white" aria-hidden="true"></span>
<span class="has-text-white" aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> Documentation </a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link has-text-white"> More </a>
<div class="navbar-dropdown bg-color is-hidden-mobile is-boxed">
<a class="navbar-item"> About </a>
<a class="navbar-item"> Jobs </a>
<a class="navbar-item"> Contact </a>
<hr class="navbar-divider" />
<a class="navbar-item"> Report an issue </a>
</div>
</div>
</div>
<div class="navbar-end">
<a class="navbar-item"> Logout </a>
</div>
</div>
</nav>
<script>
$(document).ready(function() {
$(".navbar-burger").click(function() {
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
document.querySelectorAll(".navbar-link").forEach(function(navbarLink) {
navbarLink.addEventListener("click", function() {
navbarLink.nextElementSibling.classList.toggle("is-hidden-mobile");
});
});
</script>
</body>
</html>
Related
I have a carousel inside a div. Because of the varying lengths of text used in the carousel, on a mobile device, the carousel arrows keep moving or the .carousel-text doesn't fit on the screen and cuts off at the bottom.
I've tried changing positions to absolute but the text disappears, tried setting a really large height to the div and it still moves, and I've watched videos and lots of solutions and honestly, my code is such a mess now that I don't have a clue what any of it means.
Sorry, new to coding, and any help is massively appreciated.
I promise I've spent about 90 minutes going through solutions on here and nothing seems to be working.
.carousel-div{
background-color:#FAE8C8;
padding-bottom: 200%;
padding-top:20;
width:auto;
height:800px;
}
.carousel{
position:absolute;
}
.carousel-item{
object-fit:cover;
object-position:center;
overflow:hidden;
text-align:center;
align-items: center;
}
.carousel-image{
width:250px;
}
.carousel-options{
padding-top: 10px;
font-weight:lighter;
color:#445C3C
}
.carousel-text{
font-size: 1.3rem;
padding: 0 15%;
font-weight:lighter;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap/css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/567f40eaa8.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:300" rel="stylesheet">
<title>Get Involved</title>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light fixed-top'>
<a class='navbar-brand' href="">Body Image and Ethnicity Study</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class='collapse navbar-collapse' id='navbarTogglerDemo01'>
<ul class='navbar-nav ms-auto'>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">FAQs</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#my-work">Meet the Team</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Get Involved</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Further Work</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Contact</a>
</li>
</ul>
</div>
</nav>
<h1 class='about-title' style=>Get Involved</h1>
<div class="container-lg about-main">
<div class="row">
<div class="col-lg-6">
<h1 class='about-item align-items-center'>There are multiple ways to be involved with the Body Image and Ethnicity study this year. </h1>
<h1 class='about-item align-items-center'>If you don’t identify with any of the below opportunities, then please don’t hesitate to <a href="mailto:H.k.lewis#qmul.ac.uk" class='email-han'> get in touch</a> with Hannah.</h1>
</div>
<div class="col-lg-6">
<img src="get-involved-photos/get-involved-img.png" alt="" class='about-image'>
</div>
</div>
</div>
<div class="carousel-div" >
<div id="work-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="get-involved-photos/get-involved-img2.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 1</h1>
<p class='carousel-text option-1'>If you identify as female or non-binary, are aged 13-19, are from a South Asian background and experience body image concerns, you can attend a focus group to discuss your experiences.<a href="https://forms.office.com/r/qrjJdWDkg1" class='email-han'>Just follow this link.</a></p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img3.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 2</h1>
<p class='carousel-text'>If you meet the criteria for Option 1, but would rather have a 1:1 interview than attend a focus group, you can<a href="" class='email-han'>get in touch with Hannah</a>to arrange a convenient time to chat.</p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img4.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 3</h1>
<p class='carousel-text'> If you have lived experience of either BDD or an eating disorder, and would like to be involved in the co-production of a cultural adaptation, you can<a href="" class='email-han'>get in touch with Hannah here.</a></p>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#work-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#work-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Your arrows were moving because you were using the property align-items: center and because the carousel height was never the same.
One solution you can do is to set a height not to exceed to your paragraph carousel-text .
You can add the overflow-y:auto property to make it responsive.
(you can also personalize your scrollbar)
.carousel-div{
background-color:#FAE8C8;
padding-bottom: 200%;
padding-top:20;
width:auto;
height:800px;
}
.carousel{
position:absolute;
}
.carousel-item{
object-fit:cover;
object-position:center;
overflow:hidden;
text-align:center;
align-items: center;
}
.carousel-image{
width:250px;
}
.carousel-options{
padding-top: 10px;
font-weight:lighter;
color:#445C3C
}
.carousel-text{
font-size: 1.3rem;
padding: 0 15%;
font-weight: lighter;
height: 200px;
overflow-y: auto;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- bootstrap/css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/567f40eaa8.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans:300" rel="stylesheet">
<title>Get Involved</title>
</head>
<body>
<nav class='navbar navbar-expand-lg navbar-light fixed-top'>
<a class='navbar-brand' href="">Body Image and Ethnicity Study</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class='collapse navbar-collapse' id='navbarTogglerDemo01'>
<ul class='navbar-nav ms-auto'>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">About</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#about_Me">FAQs</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#my-work">Meet the Team</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Get Involved</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Further Work</a>
</li>
<li class='nav-item'>
<a class='nav-link' href="#contact-me">Contact</a>
</li>
</ul>
</div>
</nav>
<h1 class='about-title' style=>Get Involved</h1>
<div class="container-lg about-main">
<div class="row">
<div class="col-lg-6">
<h1 class='about-item align-items-center'>There are multiple ways to be involved with the Body Image and Ethnicity study this year. </h1>
<h1 class='about-item align-items-center'>If you don’t identify with any of the below opportunities, then please don’t hesitate to <a href="mailto:H.k.lewis#qmul.ac.uk" class='email-han'> get in touch</a> with Hannah.</h1>
</div>
<div class="col-lg-6">
<img src="get-involved-photos/get-involved-img.png" alt="" class='about-image'>
</div>
</div>
</div>
<div class="carousel-div" >
<div id="work-carousel" class="carousel slide" data-bs-ride="false">
<button class="carousel-control-prev" type="button" data-bs-target="#work-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#work-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="get-involved-photos/get-involved-img2.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 1</h1>
<p class='carousel-text option-1'>If you identify as female or non-binary, are aged 13-19, are from a South Asian background and experience body image concerns, you can attend a focus group to discuss your experiences.<a href="https://forms.office.com/r/qrjJdWDkg1" class='email-han'>Just follow this link.</a></p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img3.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 2</h1>
<p class='carousel-text'>If you meet the criteria for Option 1, but would rather have a 1:1 interview than attend a focus group, you can<a href="" class='email-han'>get in touch with Hannah</a>to arrange a convenient time to chat.</p>
</div>
<div class="carousel-item">
<img src="get-involved-photos/get-involved-img4.png" alt="" class='carousel-image'>
<h1 class='about-item carousel-options'>Option 3</h1>
<p class='carousel-text'> If you have lived experience of either BDD or an eating disorder, and would like to be involved in the co-production of a cultural adaptation, you can<a href="" class='email-han'>get in touch with Hannah here.</a></p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
I'm experimenting with bulma css.
I really like it, but there's few things I don't get it.
I made a simple landing page for testing and I can't succeed having a transparent nav bar.
I want the nav bar to be transparent and then become white on scrolling. I can make it white and fixed on scrolling but not transparent.
This is my navbar. the full page is loaded on codepen
<nav class="navbar is-transparent is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand pl-4">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
<a
role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end pr-4">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> About </a>
<a class="navbar-item"> Contact </a>
</div>
</div>
</nav>
Can you please help me find the issue?
The navbar class has its own background-color: #fff; therefore you always see a white background on the navbar. You can override this property with plain CSS.
index.html
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
....
</nav>
style.css
.navbar {
background-color: hsl(0 100% 100% / 0.4);
}
UPDATED
For the opposite:
Remove class="has-navbar-fixed-top" from the body tag.
To scrolling we need JS to intercept scroll values and change the opacity on the navbar.
document.addEventListener('DOMContentLoaded', function() {
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
// Get scroll position values
const trigger = window.scrollY;
// The top position when we change the opacity
const navbarHeight = navbar.clientHeight;
if (trigger >= navbarHeight) {
navbar.setAttribute('style', 'background-color: hsl(0 100% 100% / 1)');
} else {
navbar.setAttribute('style', 'background-color: hsl(0 100% 100% / 0.7)');
}
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.4/css/bulma.min.css" />
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation" style="background-color: hsl(0 100% 100% / 0.7)">
<div class="navbar-brand pl-4">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" />
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end pr-4">
<a class="navbar-item"> Home </a>
<a class="navbar-item"> About </a>
<a class="navbar-item"> Contact </a>
</div>
</div>
</nav>
<div class="headerContainer" style="
height: 700px;
background-image: url('http://placeimg.com/1000/768/nature');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
"></div>
I have successfully added a "background-image" to my Razor Pages application.
Now, when using "filter: blur(2px);" the header and footer blur, but not the image.
I've been at this for hours, saw tons of threads on how to add the image, but couldn't find a way to do this properly (the blur), or see someone else experiencing the same behavior.
My _Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - LifeCompanion</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/LifeCompanion.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-transparent border-bottom box-shadow mb-3">
<div class="container">
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
LifeCompanion
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a class="dropdown-item" type="button" asp-page="/LActions/ImageManagement">
Images!
</a>
</li>
</ul>
</div>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - LifeCompanion - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
My CSS - using site.css to apply changes globally - is:
html {
font-size: 14px;
width: 100%;
height: 100%;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
}
So far so good.
Now when adding to my css:
body {
margin-bottom: 60px;
background: url(../img/background.jpg) no-repeat center center fixed;
background-size: cover;
width: 100%;
height: 100%;
color: white;
filter: blur(2px);
}
The footer and header blurs, but not the background-image as anticipated.
Replace filter: blur(2px); with backdrop-filter: blur(2px);.
filter will affect the element itself, and backdrop-filter will affect the elements beneath the element within the bounding box of the element.So in your project, you need to use backdrop-filter. You can follow this link to learn more about backdrop-filter.
I've created a Bootstrap navigation bar and below that, I have made a container in which I will show some description as shown in the image below. I've used the latest version of the bootstrap.
Now, the alignment of the description text should match that of the left-most item of the navigation bar, but what I'm getting from my code is shown in the below image.
Here you can clearly see that the alignment of the left most navbar item i.e. CP-210-1 button doesn't match with the description text starting with This is....
Here is my code.
.model-family-navigation-bar {
background-color: #00853e;
}
.navigation-bar-content {
color: white;
font-size: 120%;
}
.dropdown-menu>div>a:hover {
background: #8dc4d4;
}
.dropdown-menu>div:nth-child(odd) {
background: #d9d9d9;
}
.dropdown-menu>div:nth-child(even) {
background: #f9fffe;
}
.border-section {
border: 2px solid #D0D0D0;
margin-top: 20px;
}
.greenTitle {
color: green;
font-weight: bold;
}
a:link {
font-size: 120%;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>App5</title>
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container model-family-navigation-bar" style="min-height: 32px">
<nav class="navbar navbar-expand-sm navbar-dark model-family-navigation-bar" style="min-height: 32px">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<!-- <div class="col-sm-auto"> -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigation-bar-content text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="text-decoration:none">
<span id="selected" style="text-decoration:none;font-weight:bold">CP-210-1</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background-color:#00853e">
<h1 class="dropdown-header text-white">Model Family</h1>
<div>
<!-- <div class="dropdown-divider"></div> -->
<a class="dropdown-item text-black" (click)="showList()">CP210-1</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-2</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-3</a>
<a class="dropdown-item text-black" (click)="showList()">CP210-4</a>
</div>
</div>
</li>
<!-- </div> -->
<!-- <div class="col-sm-auto"> -->
<li class="nav-item">
<span class="navigation-bar-content navbar-text text-white ml-4">Proportional Directional Valve</span>
</li>
<!-- </div> -->
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="https://www.google.com/" style="font-size:13px">Data Sheet</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container border-section mt-2">
<div class="row" style="min-height:80px;">
<p class="ml-4 mt-1" style="font-size:20px">This is a proportional, 3 position 4 way, directional control valve</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>
I'm not finding any way to align the left-most item of the navigation bar to the description text. Although I have an alternative to add the left padding to the left item but that's not what I'm supposed to do. So, can anyone help me out on how to align the text with the button item? Also, I'm not finding any way to decrease the height of the green colored navigation bar container equal to that as given in the first image.
If I decrease the height then the responsive behavior is not there on decreasing the browser width. So, can anyone suggest something for that also?
As a quick fix you could try setting the left padding of the "nav-link" anchor to 0.
Something like this:
.navbar-nav .nav-link.dropdown-toggle {
padding-left: 0px;
}
Or you could add a custom class to that element and use that in your selector.
I have a CSS sticky footer defined as follows:
#foot {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
text-align: right;
padding-top: 7px;
font-size: small;
background-color: none;
}
What looks like a horizontal line appears at the bottom of all forms. When I remove the position: fixed (or absolute) the line is not shown.
Here is the test site
HTML - main index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="wtApp">
<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="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="fragment" content="!">
<meta name="google-site-verification" content="yVui_k1sbN4TDHx-yDmol0MzU1QXaTTGlhNa_gVLzUs" />
<title>Writer's Tryst, where authors and publishers, producers, agents meet.</title>
<meta name="description" content="A better way for writers to find publishers, producers and agents" />
<!-- <base href="/" /> -->
<link href='https://fonts.googleapis.com/css?family=Lobster+Two:700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" data-integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" data-integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" data-crossorigin="anonymous">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/shares.css" />
<link rel="shortcut icon" href="img/icons/writers-tryst.png" />
</head>
<body data-ng-controller="mainController">
<header>
<nav class="navbar navbar-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Writers-Tryst">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="img/writers-tryst-logo.png" alt="logo" /></a>
<div id="shares">
<!-- Twitter -->
<a href="http://twitter.com/share?url=writers.tryst.ron-tornambe.com&text=<TEXT>&via=<VIA>" target="_blank" title="twitter" class="share-btn twitter">
<i class="fa fa-twitter"></i>
</a>
<!-- Google Plus -->
<a href="https://plus.google.com/share?url=writers.tryst.ron-tornambe.com" target="_blank" title="google+" class="share-btn google-plus">
<i class="fa fa-google-plus"></i>
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/sharer/sharer.php?u=http://writers.tryst.com" target="_blank" title="facebook" class="share-btn facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- StumbleUpon (url, title) -->
<a href="http://www.stumbleupon.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn stumbleupon">
<i class="fa fa-stumbleupon"></i>
</a>
<!-- Reddit (url, title) -->
<a href="http://reddit.com/submit?url=http://writers.tryst.com&title=<TITLE>" target="_blank" class="share-btn reddit">
<i class="fa fa-reddit"></i>
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=http://writers.tryst.com&title=<TITLE>&summary=<SUMMARY>&source=<SOURCE_URL>" target="_blank" title="linked-in" class="share-btn linkedin">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div> <!--navbar-header-->
<div class="collapse navbar-collapse" id="Writers-Tryst">
<ul class="nav navbar-nav">
<li class="active"><a id="homepage" href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li> Writers</li>
<li> Enablers</li>
<li> About</li>
<li> Privacy/Rules</li>
<li> Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="login" href="#log-in"><i class="glyphicon glyphicon glyphicon-log-in"></i> Log-In</a></li>
<li><a id="create-account-link" href="#accounts"><i class="glyphicon glyphicon-user"></i> Create Account</a></li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li><a id="#update-profile" href="update-profile">Update profile</a></li>
<li><a id="#manage-uploads" href="manage-uploads">Manage uploads</a></li>
</ul>
</li>
<li ><a id="#reset-pwd-link" href="reset-pwd"></a></li>
</ul>
</div> <!--navbar-collapse-->
</div> <!--container fluid-->
</nav>
</header>
<div>
<div id="message" class="alert m-t-10"></div>
<div id="main" class="content">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div data-ng-view></div>
</div>
</div>
<div class="panel panel-default">
<div id="foot" class="text-right small">© 2016 Ronald Tornambe, Inc.</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/pages.js"></script>
<script>
$("#drop-toggle-1").on("click", function (e) {
e.preventDefault();
});
</script>
</body>
</html>
The Bootstrap panel has a border and box-shadow.
Override it like..
.panel {
border-width:0;
box-shadow:none;
}
http://www.codeply.com/go/CMWIpp8FAE
it comes from this rule in bootstrap,CSS:
.panel-default {
border-color: #ddd;
}
so just reset this rule in your custom CSS like this:
.panel-default {
border-color: transparent;
}
if you are talking about the border line just below your login section then it is because of the class panel which apply
border: 1px solid transparent;
<div class="panel panel-default">
on the Div
Class: 'panel' adds border: 1px solid transparent; and class: 'panel-default' add border-color: #ddd; so your footer does get a border.
You can fix it by adding this to your css:
.panel {border:none;}