I want to implement below structure in desktop and responsive mode. How can i change the layout of html in responsive mode?
<div class="header grid py-3">
<div class="logo_and_title grid">
<div class="logo grid">
<a id="logoid" href="/" class=" me-3"><img src="logo.png" width="100%" class="img-fluid" ></a>
<h1 id="nameid">Title of website</h1>
</div>
</div>
<div class="menu">
<!-- list of menu items-->
</div>
<div>
CSS code for desktop is:
.grid{
display: grid;
}
.logo_and_title.grid{
grid-template-columns: 3fr 7fr;
grid-gap:1rem;
}
.logo.grid{
grid-template-columns: 2fr 7fr;
}
#nameid,#logoid,.menu{
align-self: center;
}
header{
width:100%;
}
try this:
.header {
background: #002147;
color: #fff;
padding: 8px 20px;
font-family: arial;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo a {
display: flex;
}
.logo img {
max-width: 60px;
height: 60px;
border: 2px solid #fff;
}
.nameid {
margin: 0 0 0 15px;
font-size: 20px;
}
.menu .nameid {
display: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 10px;
}
#media (max-width: 860px) {
.header {
display: flex;
justify-content: flex-start;
}
.menu {
margin-left: 15px;
}
.nameid {
display: none;
}
.menu .nameid {
display: block;
margin: 0 0 5px 0;
}
}
<div class="header">
<div class="logo_and_title">
<div class="logo">
<a id="logoid" href="/">
<img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" width="100%" class="img-fluid" >
</a>
<h1 class="nameid">Title of website</h1>
</div>
</div>
<div class="menu">
<h1 class="nameid">Title of website</h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
<div>
Working with percentage and not px helps alot when building a responsive web page
.class_name{
width: 100%
}
read the following doc in Bootstrap official docs :
https://getbootstrap.com/docs/5.1/layout/grid/
I guess this helps.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
This was probably asked in a different way before, but I couldn't find any that answer this specifically.
I want to have a navbar that on a normal page is ABOVE the page content and on one with a hero image looks like it's WITHIN the page content.
I typically use Jinja2 templates (for Django) so manually putting the navbar into the page content doesn't make a lot of sense.
I currently use negative margins to do this, but it feels a bit hacky (checkout code below)
EDIT: The second navbar (where the Navbar background is BEHIND the hero background, but the Navbar text is IN FRONT of the hero background) is how I want it to be.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
:root {
--primary: #21abde;
--navbar-height: 50px;
}
.navbar {
height: var(--navbar-height);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #333;
border: 1px solid grey;
color: white;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar ul a {
padding: 10px;
color: white;
text-decoration: none;
transition: .2s ease;
}
.navbar ul a:hover {
color: var(--primary);
}
.content,
.hero {
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: darkcyan;
height: calc(100vh - var(--navbar-height));
}
.hero {
background: darkorange;
margin-top: calc(-1*var(--navbar-height));
height: 100vh;
}
<nav class="navbar">
<div class="logo">Navbar 1</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="content">
Content
</div>
<nav class="navbar">
<div class="logo">Navbar 2</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="hero">
Hero
</div>
Is there a better way to do this or is this the only way that doesn't involve manually including the navbar into the page's content (As I feel like this doesn't make a lot of sense for anything other than a static navbar)?
You're right. There is a better way. Just use position: fixed.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
:root {
--primary: #21abde;
}
.navbar {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #333;
border: 1px solid grey;
color: white;
position: fixed;
width: 100%;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar ul a {
padding: 10px;
color: white;
text-decoration: none;
transition: .2s ease;
}
.navbar ul a:hover {
color: var(--primary);
}
.content,
.hero {
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: darkcyan;
height: 100vh;
}
.hero {
background: darkorange;
height: 100vh;
}
<nav class="navbar">
<div class="logo">Navbar 1</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="content">
Content
</div>
<nav class="navbar">
<div class="logo">Navbar 2</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="hero">
Hero
</div>
I have a scrolling div contain a ul in react.
When the number of liincreased, the division should scroll horizontally.
this is my code:
<div className="inner-scrolling">
<ul className="list">
<li> item</li>
...
</ul>
</div>
this is css:
.inner-scrolling {
width: 100%;
max-width: 0;
overflow-x: auto;
}
.list {
list-style: none;
display: inline-flex;
}
This is working correctly in Chrome but not working in Firefox. How can I fix it?
I tried max-width:500px but it doesn't work in Firefox yet. actually in Firefox, lis move out of the div.
You can just add display: flex, overflow-y: hidden and overflow-x: scroll to the <ul> container.
You will also need extra containers for it to be able to work in Firefox and Safari.
All the child elements will be in a row, horizontally scrollable.
Snippet:
* {
list-style: none;
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
}
.scrolling-container {
width: 100%;
overflow-x: auto;
display: flex;
}
.list {
display: flex;
}
img {
max-height: 150px;
width: 300px;
object-fit: cover;
}
img:not(:first-child) {
margin-left: 10px;
}
<div class="container">
<div class="scrolling-container">
<div class="list">
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
</div>
</div>
</div>
You can try this code. There are multiple corrections/additions I have done in the code below.
.outerDiv {
max-width: 500px;
margin: 0 auto;
}
.inner-scrolling {
width: 100%;
overflow-x: auto;
display: flex;
}
.list {
width: 100%;
list-style: none;
display: flex;
flex-wrap: nowrap;
margin: 0;
padding: 0;
}
.list li {
width: 100px; /* Temporary width is given you can remove it later on. */
display: inline-block;
padding: 10px 20px;
}
<div class="outerDiv">
<div class="inner-scrolling">
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</div>
</div>
We will have a background image on a <div> element and two further elements: a menu and a title. We are having trouble aligning the menu at the top and title in the middle of the banner image.
Here is the jsfiddle as well
How can we align the menu at the top and title in the middle of the image?
Current issue:
Expected outcome:
Here is what we tried, but cannot get it to align in all breakpoints. (min-width: 320px and min-width: 1440px)
.wrapper {
position: relative;
display: block;
}
.banner__img {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
position: absolute;
z-index: 1;
min-height: 300px;
}
.content__wrapper {
position: relative;
z-index: 2;
padding: 16px;
}
.menu-bar__list:hover > ul {
display: block;
}
.menu-bar__list {
position: relative;
margin-right: 16px;
}
.menu-bar__list__second {
display: none;
position: absolute;
}
.menu-bar {
display: flex;
flex-direction: row;
}
ul {
list-style: none;
}
.content__title {
text-align: center;
}
.logo > img {
max-width: 50px;
}
.content__menu {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div class="wrapper">
<div class="banner__img" style="background-image: url('http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg')"></div>
<div class="content__wrapper">
<div class="content__menu">
<div class="logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<nav>
<ul class="menu-bar">
<li class="menu-bar__list">Home</li>
<li class="menu-bar__list">
Products
<ul class="menu-bar__list__second">
<li >Products Sub Menu 1</li>
<li>Products Sub Menu 2</li>
<li>Products Sub Menu 3</li>
<li>Products Sub Menu 4</li>
</ul>
</li>
<li class="menu-bar__list">
Services
<ul class="menu-bar__list__second">
<li>Services Sub Menu 1</li>
<li>Services Sub Menu 2</li>
<li>Services Sub Menu 3</li>
<li>Services Sub Menu 4</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content__title">
<h1>Some title here</h1>
</div>
</div>
</div>
I simplified your code somewhat (possibly not enough), but you can get the idea (please check How to create a Minimal, Reproducible Example):
.banner {
position: relative;
overflow: hidden;
}
.background {
object-fit: cover;
width: 100%;
}
.logo {
float: right;
}
.logo > img {
max-width: 50px;
}
.content {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
padding: 24px;
display: flex;
flex-direction: column;
}
.content__menu {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.content__title {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.menu-bar__list:hover > ul {
display: block;
}
.menu-bar__list {
position: relative;
margin-right: 16px;
}
.menu-bar {
display: flex;
flex-direction: row;
}
ul {
list-style: none;
}
<div class="banner">
<img class="background" src="http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg" alt="">
<div class="content">
<div class="content__menu">
<div class="logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<nav class="menu">
<ul class="menu-bar">
<li class="menu-bar__list">
Home
</li>
<li class="menu-bar__list">
Products
</li>
<li class="menu-bar__list">
Services
</li>
</ul>
</nav>
</div>
<div class="content__title">
<h1>Some title here</h1>
</div>
</div>
</div>
EDIT: codepen link, since the preview here doesn't show (something to do with absolute positioning, I guess): https://codepen.io/herzinger/full/xxxOamN
can you please check with below code, hope it will resolve your issue.
Demo: https://jsfiddle.net/yudizsolutions/f81oymxs/14
.wrapper {
min-height: 300px;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
position: relative;
}
header {
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
nav {
display: flex;
display: -webkit-flex;
justify-content: space-between;
}
.menu-bar__list:hover > ul {
display: block;
}
.menu-bar__list {
position: relative;
margin-right: 16px;
}
.menu-bar__list__second {
display: none;
position: absolute;
}
.menu-bar {
display: flex;
flex-direction: row;
}
ul {
list-style: none;
}
.content__title {
text-align: center;
}
.logo img {
max-width: 50px;
}
<div class="wrapper" style="background: url('https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg') no-repeat top center / cover;">
<header>
<nav>
<div class="logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<ul class="menu-bar">
<li class="menu-bar__list">Home</li>
<li class="menu-bar__list">
Products
<ul class="menu-bar__list__second">
<li >Products Sub Menu 1</li>
<li>Products Sub Menu 2</li>
<li>Products Sub Menu 3</li>
<li>Products Sub Menu 4</li>
</ul>
</li>
<li class="menu-bar__list">
Services
<ul class="menu-bar__list__second">
<li>Services Sub Menu 1</li>
<li>Services Sub Menu 2</li>
<li>Services Sub Menu 3</li>
<li>Services Sub Menu 4</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="content__wrapper">
<h1>Some title here</h1>
</div>
</div>
Use a <nav> for the menu and use the align attribute to center the title.
You could put the text inside the image's div
<div class="banner__img" style="background-image: url('http://www.ikozmik.com/Content/Images/uploaded/its-free-featured.jpg')">
<div class="content__title">
<h1>Some title here</h1>
</div>
</div>
And then apply the following style to the .banner__img in css:
display: flex;
align-items: center;
justify-content: center;
The text now stays in the center, even if you resize the window. Flexbox allows you to align elements both vertically and horizontally.
I am trying to use a flexbox nav menu with dropdowns for some menus. For some reason, on hover, the dropdown lists are showing up to the right of the container I am hovering on. I would like for them to show below, like a normal nav menu.
Here is a codepen:
http://codepen.io/anon/pen/XbmaBY
HTML:
<nav id="nav">
<ul class="nav-flex">
<li class="nav-brand-flex">
<img src="img.png" \>
</li>
<li class="nav-link-flex nav-flex-dropdown">
Dropdown 1
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</li>
<li class="nav-link-flex nav-flex-dropdown">
Dropdown 2
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</li>
<li class="nav-link-flex">
Regular 1
</li>
<li class="nav-link-flex">
Regular 2
</li>
<li class="nav-link-flex">
Regular 3
</li>
</ul>
</nav>
Sass:
.nav-flex {
display: flex;
list-style-type: none;
padding: 0;
background-color: #58575f;
li {
justify-content: center;
a {
align-self: center;
color: white;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
letter-spacing: .4px;
}
}
#media (max-width: 760px) {
padding-top: 0;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-direction: column;
-webkit-flex-direction: column;
background-color: #f6f6f6;
}
}
.nav-link-flex {
display: flex;
padding: 0 12.5px;
position: relative;
#media (max-width: 760px) {
width: 90%;
background-color: #494949;
border-radius: 20px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
padding: 10px;
}
&:hover {
background-color: white;
a {
color: black;
text-decoration: none;
&+ div {
display: block;
}
}
}
a {
&+ div {
border-radius: 0 0 2px 2px;
box-shadow: 0 3px 1px rgba(0,0,0,.05);
display: none;
font-size: 1rem;
position: absolute;
width: 195px;
}
}
}
.nav-brand-flex {
margin-right: auto;
display: flex;
padding: 5px 0;
a {
display: flex;
img {
height: 35px;
align-self: center;
}
}
#media (max-width: 760px) {
margin: 0;
background-color: #494949;
width: 100%;
border-radius: 0;
font-size: 36px;
padding: 10px 0;
margin-bottom: 10px;
}
}
Any help would be greatly appreciated, because I cannot figure out why they are going to the right instead of below.
This happens because the default value of flex-direction is flex-direction: row. You want to override this, by adding flex-direction: column; to .nav-link-flex. So, it should be:
.nav-link-flex {
display: flex;
padding: 0 12.5px;
position: relative;
flex-direction: column; // <-- add this line in your scss
...
By way of example I've added this in to a fork of your pen.
I have pretty simple navigation.
Three divs inside a header (logo, navigation and phone).
I want to make them responsive and stretchable whenever user zooms out.
Example
http://www.zendrive.com/
Can someone give me a simple CSS example on how to achieve this?
.header {
display: table;
position: relative;
width: 100%;
height: 60px;
}
.header > * {
display: table-cell;
position: relative;
height: 100%;
}
.header .navigation ul {
display: inline-block;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.header .navigation li {
display: inline-block;
}
<header class="header">
<div class="logo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<nav class="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
<div class="phone">555.555.5555</div>
</header>