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;
}
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 tried to add the footer, but it adds on top of the background-image at the bottom of my page. I tried to remove the "display:fixed" from footer, but the horizontal scroll shows up. How can I fix this?
I want the footer to be always visible on the screen when you scroll the page.
Here is more detail code snipet, I would appreciate if you guys can help with this.
html,
body {
height: 100%;
font-family: 'Google Sans',Roboto,Arial,sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
body {
background-image: url("/img/bg-new-edit.jpg");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: relative;
}
/* Basic styling */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
h2 {
font-weight: 350;
margin: 580px 40px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: gray;
text-align: center;
background-color: white;
}
}
<body>
<nav>
<ul class="menu">
<li class="logo"><img class="logo" src="img/TARRAHJEWELRY-LOGO.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Bridal Jewelry</a>
<ul class="submenu dropdown-content">
<li class="subitem">Engagement</li>
<li class="subitem">Men Wedding</li>
<li class="subitem">Women Wedding</li>
</ul>
</li>
<li class="item has-submenu dropdown">
<a tabindex="0">Collection</a>
<ul class="submenu dropdown-content">
<li class="subitem">Ring</li>
<li class="subitem">Necklace</li>
<li class="subitem">Earring</li>
<li class="subitem">Bracelet</li>
</ul>
</li>
<li class="item">Contact
</li>
<li class="item button">My Account</li>
<li class="item button">Cart</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
<h2>We believe people who live life in their special way,<br> deserve unique jewelry.</h2>
<footer><p>Footer</p></footer>
<div class="clearfix"></div>
</body>
select the footer
footer {
bottom: 0;
position: fixed
}
note that this will cause a scroll bar to appear
to remove the scroll bar
body {
overflow: hidden
}
That should solve your problem
I'm trying to make the links appear in the center and when I resize the page to show on mobile I want them to be placed next to each other.
Now there's 3 big blocks on top of each other on mobile. These have to be next to each other and smaller.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.container {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 32px 32px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-bottom: 30px;
}
<div class="navbar">
<div class="row">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</div>
</div>
In the code I provided you can see the code of the html page and de CSS. The images contain the view of the mobile version and how it looks on a normal browser on my laptop.
<div class="navbar">
<ul class="row">
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
<li class="nav-link col-md-4"> QR-Scanner </li>
</u>
</div>
First of all, your code is incorrect.
There is no nav and ul tag, and your class navbar is in the wrong place.
Your list should be:
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
<li class="nav-link">
QR-Scanner
</li>
</ul>
</nav>
Next, you need to change styles in your responsive CSS.
.navbar-nav{
text-align: center;
}
.nav-link{
display: inline-block;
}
Here is the reference:
https://getbootstrap.com/docs/4.3/components/navbar/
Cheers.
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
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">