I have a header with an image that would be the logo and a search bar on the right of it but the search box and the search button don't stick together
.header {
display: flex;
flex-direction: row;
padding-top: 20px;
padding-left: 10px;
background: white;
}
.header h1 {
font-size: 30px;
padding-right: 10px;
width: 30%;
}
#search-bar {
width: 60%;
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#search-button {
width: 10%;
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
<div class="header">
<h1>
<img src="" alt="Company Logo">
</h1>
<form action="search">
<input type="text" id="search-bar" placeholder="Search anything...">
<button type="submit" id="search-button">Search</button>
</form>
</div>
Also, how can I make the search bar and button bigger to the right while still being responsive (not wrapping, just getting smaller)?
.header {
display: flex;
flex-direction: row;
padding-top: 20px;
padding-left: 10px;
background: white;
}
.header h1 {
font-size: 30px;
padding-right: 10px;
width: 30%;
}
#search-bar {
width: 60%;
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#search-button {
height: 40px;
font-size: 1rem;
border: 1px solid #D0CFCE;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.header form {
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<h1><img src="" alt="Company Logo"></h1>
<form action="search">
<input type="text" id="search-bar" placeholder="Search anything...">
<button type="submit" id="search-button">Search</button>
</form>
</div>
</body>
</html>
** You Cat Try With it **
Related
const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {eyeIcon.addEventListener("click",() =>
{let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide","bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show","bx-hide");
})
})
})
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: center;
}
form{
margin-top: 30px;
}
form a{
color:#2b2b2b;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form .field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 70px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page Title -->
<title>Login - LNEM</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Icon CSS -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<!-- Email Address -->
<input type="text" class="login-input" name="email" placeholder="Email Address">
</div>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
Forgot Password?
</div>
<div class="field button-field">
<button>Sign In</button>
</div>
<div class="form-link">
<span>Don't have an account? Create Account</span>
</div>
</form>
</div>
</section>
<!-- Javascript -->
<script src="js/script.js"></script>
</body>
</html>
Im relatively new to CSS coding and whilst creating a login/register form for my coursework i noticed that within the password input field, the characters are appearing underneath the show/hide icon as shown below
is there any way to fix this?
I have visited a couple threads on this site and have found half the problem where padding was added, it has solved half the problem since it stops the vertical line ("|" <-- this thing) from going over the icon but once I show the password some characters still appear underneath the icon
So it seems to work for me when I change padding-right, but it's also possible that some css directives weren't applied because some html might have been missing.
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 40px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
I have this problem where the flex basis size was changed based on the button size. It would be helpful if someone help me to clear this problem.
* {
box-sizing: border-box;
}
body {
background-color: #f2ebe3;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
#container {
width: 375px;
height: 630px;
border-radius: 10px;
background-color: white;
}
#back-image img {
width: 375px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#p1 {
margin-left: 20px;
opacity: 0.6;
}
#h1 {
margin-left: 20px;
font-family: 'Fraunces', serif;
}
#h2 {
margin-left: 20px;
margin-top: -5%;
font-family: 'Fraunces', serif;
}
#p2 {
margin-left: 20px;
text-align: left;
line-height: 1.4rem;
opacity: 0.7;
}
#price-container {
margin-left: 20px;
display: flex;
align-items: center;
}
#price-container h1 {
font-family: 'Fraunces', serif;
color: #3c8067;
}
#price-container p {
margin-left: 1rem;
font-family: 'Montserrat', sans-serif;
text-decoration: line-through;
opacity: 0.6;
}
#btn {
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
width: 20rem;
height: 50px;
background-color: #3c8067;
border: none;
color: white;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
}
#btn:hover {
cursor: pointer;
background-color: #2F5951
}
.cart {
margin-right: 10px
}
#media (min-width:576px) {
#container {
display: flex;
max-width: 1440px;
max-height: 400px;
margin-top: 8%;
margin-right: 30%;
}
#container-2 {
flex-basis: 50%;
background-color: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#back-image img {
flex-basis: 50%;
height: 400px;
border-top-right-radius: 0%;
border-bottom-left-radius: 10px;
}
#btn {
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght#500&family=Karla&family=League+Spartan:wght#100&family=Montserrat:wght#500&family=Red+Hat+Display:wght#500&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght#500&family=Fraunces:opsz,wght#9..144,700&family=Karla&family=League+Spartan:wght#100&family=Montserrat:wght#500&family=Red+Hat+Display:wght#500&display=swap" rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Product preview card component</title>
</head>
<body>
<div id="container">
<div id="back-image">
<img src="https://images.unsplash.com/photo-1672197339033-688e27f884f2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=60" alt="Product image" />
</div>
<div id="container-2">
<p id="p1">P E R F U M E</p>
<h2 id="h1">Gabrielle Essence</h2>
<h2 id="h2">Eau De Parfum</h2>
<p id="p2">
A floral, solar and voluptuous <br /> interpretation composed by Olivier <br /> Polge, Perfumer-Creator for the House of <br /> CHANEL.
</p>
<div id="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<button id="btn">
<img class="cart" src="images/icon-cart.svg" alt="" />
Add to Cart
</button>
</div>
</div>
</body>
</html>
I tried to reduce the size of the button while changing the size of the button, and the flex-basis ratio also changed. I don't know why. Can anyone help me to clear this up?
Did few changes like added flex-basis: 50% to #back-image instead of #back-image img, added justify-content: space-between and align-items: center to #container-2 for media query.
Though if you increase button size beyond initial 50% of container size, flex-basis for container-2 may grow as well.
* {
box-sizing: border-box;
}
body {
background-color: #f2ebe3;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
text-align: left;
}
#container {
width: fit-content;
height: fit-content;
background-color: red;
border-radius: 10px;
background-color: white;
}
#container-2 {
padding-block-end: 1em;
}
#back-image {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#p1 {
margin-left: 20px;
opacity: 0.6;
}
#h1 {
margin-left: 20px;
font-family: 'Fraunces', serif;
}
#h2 {
margin-left: 20px;
margin-top: -5%;
font-family: 'Fraunces', serif;
}
#p2 {
margin-left: 20px;
text-align: left;
line-height: 1.4rem;
opacity: 0.7;
}
#price-container {
margin-left: 20px;
display: flex;
align-items: center;
}
#price-container h1 {
font-family: 'Fraunces', serif;
color: #3c8067;
}
#price-container p {
margin-left: 1rem;
font-family: 'Montserrat', sans-serif;
text-decoration: line-through;
opacity: 0.6;
}
#btn {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
text-align: center;
margin-left: 20px;
width: 5rem;
height: fit-content;
border: none;
color: white;
border-radius: 10px;
padding: 1em;
background-color: #3c8067;
font-family: 'Montserrat', sans-serif;
}
#btn:hover {
cursor: pointer;
background-color: #2F5951
}
.cart {
margin-right: 10px
}
#media (min-width:576px) {
#container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1440px;
max-height: 400px;
margin-top: 8%;
margin-right: 30%;
}
#container-2 {
flex-basis: 50%;
width: 100%;
height: 100%;
background-color: white;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding-block-end: 1em;
}
#back-image {
flex-basis: 50%;
width: 100%;
height: 100%;
border-top-right-radius: 0%;
border-bottom-left-radius: 10px;
}
#btn {
margin-right: 10px;
}
}
<div id="container">
<div id="back-image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEKnuXARsxMe34S8gF8HM_KISj3yDVF1MCcTa4ZBTiIHPTZauH2QrLA5DNME3bBzTx5O8&usqp=CAU" alt="Product image" />
</div>
<div id="container-2">
<p id="p1">P E R F U M E</p>
<h2 id="h1">Gabrielle Essence</h2>
<h2 id="h2">Eau De Parfum</h2>
<p id="p2">
A floral, solar and voluptuous <br /> interpretation composed by Olivier <br /> Polge, Perfumer-Creator for the House of <br /> CHANEL.
</p>
<div id="price-container">
<h1>$149.99</h1>
<p>$169.99</p>
</div>
<button id="btn">
<img class="cart" src="images/icon-cart.svg" alt="" />
Add to Cart
</button>
</div>
</div>
can anyone help me with how can I center my hamburger Icon on my sidebar? currently, when I decrease the sidebar width it's not centered at all. Can anyone help me how to accomplish it? I've also tried using justify-content: center on the main class however still not working.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<i class="bx bx-menu"></i>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>
You can use like that
<div style="
display: flex;
justify-content: space-around;
">...CONTENT...</div>
I edited your code also.
let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
sidebar.classList.toggle("close")
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.nk-sidebar {
position: fixed;
top: 0;
height: 100%;
width: 270px;
display: flex;
flex-direction: column;
border-right: 1px solid #e6e5e5;
padding: 10px;
transition: 0.3s ease all;
}
.nk-sidebar.close {
width: 73px;
}
.nk-sidebar .nk-sb-hrd {
display: flex;
align-items: center;
/* flex: 0 0 50px; */
/* padding: 10px; */
width: 100%;
gap: 10px;
background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
font-size: 16px;
color: #fff;
font-weight: 600;
}
.nk-sidebar .nk-sb-nav {
flex: 1;
}
.nk-sidebar .nk-sb-footer {
display: flex;
flex-direction: column;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
min-width: 50px;
height: 50px;
width: 50px;
padding: 5px;
border-radius: 10px;
}
.nk-sb-hr-ham {
height: 40px;
min-width: 40px;
border: 1px solid #e6e5e5;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
cursor: pointer;
background: red;
}
.ham {
width: 20px;
height: 2px;
background: #0057d9;
}
.nk-sb-company {
font-weight: 600;
color: #0057d9;
font-size: 14px;
white-space: nowrap;
}
.nk-section {
position: relative;
left: 270px;
width: calc(100% - 270px);
padding: 10px;
height: 100vh;
background: yellow;
transition: 0.3s ease all;
}
.nk-sidebar.close .nk-sb-company {
opacity: 0;
pointer-events: none;
}
.nk-sidebar.close ~ .nk-section {
left: 73px;
width: calc(100% - 73px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../materials/fonts/new/fonts.css">
<link rel="stylesheet" href="../materials/css/dashboard.css">
<script src="../materials/plugins/jquery-3.6.0.js"></script>
<link href='https://unpkg.com/boxicons#2.1.2/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="nk-sidebar">
<div class="nk-sb-hrd">
<div class="nk-sb-hr-ham">
<div class="ham top"></div>
<div class="ham mid"></div>
<div class="ham bot"></div>
</div>
<div class="nk-sb-company">Zybm Business Applications</div>
</div>
<div class="nk-sb-nav">
</div>
<div class="nk-sb-footer">
asdasd
</div>
</div>
<div class="nk-section">
<div style="display:flex; justify-content: space-around;"><i class="bx bx-menu"></i></div>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>
EDIT : https://codepen.io/agokselb/pen/eYrYBMP
How can I keep the dropdown open on clicking pumpkin icon be able to type something and close the dropdown when clicking anywhere else on screen except dropdown?
I know that something needs to be done here:
.header-bar-mobile-drop-down__icon-button:focus
.header-bar-mobile-drop-down__item
Note: trying to avoid using JS.
I tried to use &:focus in the parent class but it didn't work
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
opacity: 0;
border: 1px solid orange;
}
.header-bar-mobile-drop-down__icon-button:focus
+ .header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button
class="header-bar-mobile-drop-down__icon-button"
tabindex="1"
>
🎃 1
</button>
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
Got the answer which involves using one of new css attributes :focus-within
And moving the dropdown code above to make it a child of the clickable tag, which in my case is button
NOTE: this solution will not work for IE 11
Here is the code:
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar {
min-height: 3.5rem;
box-shadow: none;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
border: 1px solid orange;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header-bar-mobile-drop-down__icon-button:focus-within
.header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
.header-bar__toggle-menu {
height: 100%;
padding: 0 1rem 0 0.5rem;
display: flex;
align-items: center;
background-color: transparent;
color: black;
border: none;
font-size: 1.5rem;
min-width: 0;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button class="header-bar-mobile-drop-down__icon-button">
🎃 1
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</button>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
I have a little problem with my header i want this:
search bar to be flexible, and this means that if that orange buttons text becomes larger the search bar must resize so that buttonsdont go down who knows how to do it can you share your experience, and sorry form my English
HTML
<div class="navigation-holder">
<div id="top-navbar">
<div class="container">
<div class="col-lg-9 no-padding">
<input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам">
</div>
<div class="col-lg-3 no-padding">
<div class="top-navbar-links">
#if(Auth::check())
{{ Auth::user()->first_name }}
Выйти
#else
aefaefaefaefaefaefaefe
Зарегистрироваться
#endif
</div>
</div>
</div>
</div>
<nav id="navbar">
<div class="container">
<button class="navbar-toggle">
<span></span>
</button>
<ul class="navbar-nav">
<li>Обратная связь</li>
<li>О проекте</li>
<li>Рус</li>
<li>Узб</li>
<li>Eng</li>
</ul>
</div>
</nav>
</div>
#top-navbar{
min-height: 50px;
width: 100%;
background-color: #brand-blue;
.top-navbar-search{
width: 100%;
min-height: 50px;
padding: 0 70px 0 20px;
color: #fff;
background: #339dd1 url(../img/search.svg) no-repeat 97% 48%;
background-size: 22px;
font-size: 18px;
font-family: 'Light';
.placeholder({
color: #fff;
});
}
.top-navbar-links{
width: 100%;
text-align: center;
display: table-cell;
a{
padding: 0 10px;
font-family: 'Light';
color: #fff;
display: inline-block;
line-height: 50px;
font-size: 18px;
min-height: 50px;
float: left;
background-color: #brand-yellow;
.transition(background, 200ms, linear);
&:hover{
background-color: #d17a45;
}
}
}
}
#navbar{
background-color: #fff;
min-height: 70px;
width: 100%;
border-bottom: 1px solid #cbcbcb;
.navbar-brand{
width: 160px;
height: 41px;
background: url(../img/brand.svg) no-repeat center;
background-size: 100%;
display: inline-block;
margin-top: 16px;
}
.navbar-toggle{
width: 70px;
height: 70px;
float: right;
position: relative;
display: none;
span{
display: block;
width: 35px;
margin: 0 auto;
height: 4px;
background-color: #393939;
.transition(all, 200ms, linear);
&:before{
content: '';
top: 23px;
.bar;
}
&:after{
content: '';
bottom: 23px;
.bar;
}
}
&:hover{
span{
background-color: #brand-blue;
&:before, &:after{
background-color: #brand-blue;
}
}
}
}
.navbar-nav{
float: right;
display: inline-block;
line-height: 70px;
li{
display: inline-block;
&:first-child{
margin-right: 20px;
}
&:nth-child(3){
margin-left: 30px;
}
}
a{
display: block;
line-height: 70px;
color: #brand-black;
.transition(color, 100ms, linear);
&:hover{
color: #brand-blue;
}
}
}
}
Use bootstrap grid, an example:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:blue;"></div>
<div class="col-sm-7" style="background-color:lavenderblush;">Search</div>
<div class="col-sm-1" style="background-color:lavenderblush;">Button</div>
<div class="col-sm-2" style="background-color:blue;"></div>
</div>
</div>
</body>
</html>