I was trying to convert PSD to Html and i got a little problem solving this issue. Take a look at the image below:
As I've mentioned with the red arrow, there is a blue background image in the header of the template! how can I add this background with a responsive and stable position even if the browser size changes? The background should always contain 70% of the screen (ends between the logo and the first nav-item).
Here is the jsfiddle of my work: https://jsfiddle.net/4dpgbLt9/2/
html,
body {
height: 100%;
}
body {
font-family: IranSans, sans-serif;
}
.header {
height: 100vh;
width: 100vh;
background: url("https://i.imgur.com/aN7jCZE.png") left no-repeat;
background-size: contain;
}
.navbar {
direction: rtl;
padding-top: 16px;
}
.nav-item .nav-link {
font-size: 16px;
padding: 0 20px 0 20px !important;
}
.nav-item.active .nav-link {
color: #ffd738 !important;
}
.nav-item .nav-link {
color: #ffffff !important;
}
.nav-account-parent {
position: relative;
}
.nav-account {
position: absolute;
width: 100%;
height: 100px;
top: -50px;
z-index: -1;
background-color: #025c64;
border-radius: 16px;
}
.navbar-brand img {
width: 220px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">
<body>
<nav class="navbar navbar-expand-md navbar-light bg-transparent justify-content-center">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://i.imgur.com/gURHBju.png" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">صفحه اصلی</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">درباره ما</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">درخواست مشاوره</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">خدمات</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">فروشگاه</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ارتباط با ما</a>
</li>
<li class="nav-item nav-account-parent">
<div class="nav-account"></div>
<a class="nav-link" href="#">ورود / عضویت</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="header">
</div>
Thanks for your time ♥
This is my solution:
Change .header width from 100vw to 100%
Change background-size from contain to 70% within .header
Add top to background: to anchor it to the top left
CSS:
.header {
height: 100vh;
width: 100%;
background: url("https://i.imgur.com/aN7jCZE.png") top left no-repeat;
background-size: contain;
background-size: 70%;
}
codepen: https://codepen.io/CodeBoyCode/pen/VEEoQW
Related
My bootstrap Navbar is white and despite trying everything i can find on Stack i cant override the white to make it transparent.
I have tried setting the background to transparent
The image behind is set to VH100 so should be behind the nav
I have tried using Inspect and targeting every colour instruction i could find
I removed the bg class from the navbar thinking that would help
Here is my html
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid">
<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">
<img src="/assets/images/MothersSpinesLogo.png" alt="Mothers Spines MS Logo">
<ul id="nav" class="navbar-nav ms-auto">
<li class="active nav-item">
<a class="nav-link"href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
and my CSS;
/* Navigation */
.navbar-brand {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 60px;
max-width: 60px;
margin-left: 30px;
}
.navbar {
align-items: end;
background: none;
background-color: rgba(0, 0, 0, 0.0);
--bs-navbar-nav-link-padding-x: 3.5rem;
font-family: 'Montserrat';
font-size: 120%;
list-style-type: none;
letter-spacing: 1px;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
}
.navbar a {
text-decoration: none;
color: #252525;
}
.nav-item {
padding-top: 25px;
}
Screenshot of Nav and Inspect open
.navbar { background-color: transparent; }
Add the following to the image: height: 100vh;, position: absolute; and top: 0;.
If you just set height: 100vh; to the image, the image will be full viewport height, but it will start AFTER the navbar. You want to place it below the navbar. You do this by setting position: absolute; and top: 0;.
In short, the problem is caused by the image.
It looks like there are issues with element placement. Code provided does work for overlaying the image.
img#bg {
position: absolute;
}
/* Navigation */
.navbar-brand {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
max-height: 60px;
max-width: 60px;
margin-left: 30px;
}
.navbar {
align-items: end;
background: none;
background-color: transparent;
--bs-navbar-nav-link-padding-x: 3.5rem;
font-family: 'Montserrat';
font-size: 120%;
list-style-type: none;
letter-spacing: 1px;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.0);
}
.navbar a {
text-decoration: none;
color: #252525;
}
.nav-item {
padding-top: 25px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<img id="bg" src="https://st3.depositphotos.com/1021722/13762/i/600/depositphotos_137623752-stock-photo-art-spring-background-fresh-flower.jpg">
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a href="index.html" class="navbar-brand">
<img alt="Mothers Spines MS Logo">
</a>
<ul id="nav" class="navbar-nav ms-auto">
<li class="active nav-item">
<a class="nav-link" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
I am struggling with changing the color of my font in my nav bar button eg. Home to white. In my style.css file I first used .navbar-nav li but then the padding did not work, when I changed it to .navbar-nav ul the padding then worked. I then had to use .navbar-nav li a for the next style syntax to work and all seem to work except for the color syntax. Please advise what I am doing wrong for the color syntax not to work.
The color syntax again does not work in my .fa-bars class conditions but the font size in that class does work.
The last problem I seem to have is that the syntax in my .promo-title class does not work. Any help would be much appreciated. Thanks.
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar-nav li a {
color: #fff;
/*Not working letters in nav bar not white*/
font-weight: 600;
float: right;
text-align: left;
}
.fa-bars {
color: #fff;
/*Not working menu bars not white*/
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/50"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<i class="fa fa-bars" aria-hidden="true"></i> <!--adds menu bars when shrinking screen or in mobile view-->
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<!--ml-auto moves navbar to the right side-->
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
Your selector specificity isn't high enough, so the Bootstrap styles take precedence. A quick look at your browser's document inspector reveals this. Use a more specific selector.
The same is true for the button (but you should remove the default Bootstrap icon).
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
/* sticky on the top */
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0;
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-nav ul {
padding: 0 10px;
}
.navbar.navbar-light .navbar-nav li a {
color: #fff;
font-weight: 600;
float: right;
text-align: left;
}
body .navbar-light .navbar-toggler {
color: #fff;
border-color: #fff;
font-size: 30px;
}
.navbar-toggler {
outline: none;
}
/*--------------banner section------------*/
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
/*Extended purple banner down*/
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.2.1/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"> <img src="https://via.placeholder.com/50"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<!--ml-auto moves navbar to the right side-->
<li class="nav-item">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<!--Banner section-->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">BEST CUSTOM DATABASE COMPANY</p>
<p>Add sentence here not sure what to say just yet but has to be good</p>
</div>
</div>
</div>
</section>
</body>
You can use
a.nav-link{
color:#fff!important;
}
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 1 year ago.
Im trying to get my navbar to look like this:
But it looks like this:
I am using bootstrap 5. I basically want the navbar links on either side of the logo. Can I add some custom class in the html and then just translate them i tried this but couldnt get it to work. Here is the HTML and CSS for the navbar.
<nav class="navbar navbar-expand-md navbar-dark bg-custom fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mb-02 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">GALLERY</a>
</li>
<!-- <a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a> -->
<li class="nav-item">
<a class="nav-link navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MENUS</a>
</li>
<li class ="nav-item nav-item-left">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
/* NAVBAR */
.navbar {
border-bottom: solid #5f4b22;
}
.bg-custom{
background-color: #141619;
}
.navbar-brand {
flex: 0 1 auto;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 0;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%);
text-align: center;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
border:3px solid #5f4b22;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
Your just need to update your navbar-brand class as follows and add custom height for ul e.g ul {height:40px;}.And finally add position: inherit; for img. Your modified/updated css will be as follows;
.navbar-brand {
/* flex: 0 1 auto; */
/* display: block; */
width: 100px;
height: 100px;
/* position: absolute; */
/* left: 50%; */
top: 0;
margin: 0 !important;
padding: 0 !important;
/* transform: translateX(-50%); */
text-align: center;
}
ul {
height:40px;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
border: 3px solid #5f4b22;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
position: inherit;
}
Related StackOverFlow post can also be helpful for you.
I'm actually stuck to develop a two-column responsive website. I cannot get my background-image to be responsive and I don't know if my structure is correct.
My first column is called sidebar and the second one - main-content.
HTML:
<body>
<section class="sidebar">
<nav>
<div id="logo" class="container-fluid">
<a class="navbar-brand" href="#"><h1>Coffee Mug</h1></a>
</div>
<div id="navbar" class="container-fluid">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</section>
<section class="main-content">
<header class="container-fluid">
</header>
</section>
</body>
CSS:
.sidebar
{
position: fixed;
float: left;
width: 25%;
height: 100% !important;
background-color: #93AF79 !important;
}
#logo
{
margin: 80px 100px;
}
#navbar ul li
{
text-align: center;
}
#main-content
{
width: 85%;
}
header
{
background: url("Coffee_mug2.png") no-repeat;
background-size: cover;
/* max-width: 100%; */
height: 600px;
}
What am I doing wrong?
Oh, so you mean like this?
body {
margin: 0;
padding: 0;
}
.sidebar {
position: fixed;
float: left;
width: 25%;
height: 100% !important;
background-color: #93AF79 !important;
}
#logo {
margin: 80px 100px;
}
#navbar ul li {
text-align: center;
}
#main-content {
width: 75%;
}
header {
background: url("https://sd-1.archive-host.com/membres/images/210138792344645661/Coffee_mug2.png") no-repeat;
background-size: cover;
background-position: top center;
height: 600px;
}
main {
height: 1000px;
}
<section class="sidebar">
<nav>
<div id="logo" class="container-fluid">
<a class="navbar-brand" href="#">
<h1>Coffee Mug</h1>
</a>
</div>
<div id="navbar" class="container-fluid">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</section>
<section class="main-content">
<header class="container-fluid"></header>
<main>content content content</main>
</section>
Looks like it's a misuse of the background shorthand property, the following change should get it done for you:
header{
background: no-repeat url("https://sd-1.archive-host.com/membres/images/210138792344645661/Coffee_mug2.png") ;
background-size: contain;
height: 600px;
}
I'm having trouble centering my logo in the navbar. I've looked through other posts, but none of the solutions seem to work without messing something else. I don't understand why the logo won't center and I need the site to be responsive.
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Recruitment</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="template.html">
<img src = "logo.png" width="100" alt="logo thing">
</a>
</div>
<div class="hamburger-menu">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Leadership</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sisterhood</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Philanthropy</a>
</li>
</ul>
</div>
</nav>
Here's the css for the html.
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
position: relative;
float: center;
}
}
.navbar{
font-family: Montserrat;
font-size: 1em;
}
/* change spacing for nav items*/
.navbar-expand-md .navbar-nav .nav-link {
padding-right: 2.5rem;
padding-left: 2.5rem;
}
.nav-item, .navbar-nav{
font-family: Montserrat;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
position: relative;
float: center;
}
}
You have an extra breaking bracket after float:center;.
There is no such thing as float:center;
There are a variety of ways to center things. The easiest is to:
.parent-element {
display: flex;
justify-content: center;
}
If the parent is position: relative, you can make the target element position absolute and do this https://codepen.io/anon/pen/EQGgpM:
.parent-element {
position: relative;
width: 200px;
height: 50px;
outline: 1px solid #000;
}
.child {
position: absolute;
outline: 1px solid #cc0000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
An img element responds to text-align: center just fine.
html, body {
width:100%;
text-align: center;
}
<img src="https://telecomputingarchitects.com/media/logo.png" alt="logo" height="48">