I know this is a minor issue, but you may notice that the icons (that I pulled off of react-icons) are slightly lifted up within the buttons. How could I put them right in the middle?
Thats my only question but it won't let me post that alone because my post it mostly code so here's more words. What a stupid feature.
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell, AiOutlineSearch } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" placeholder="Search" className="form-control" />
<button className="searchBtn"><AiOutlineSearch/></button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">
<FiMail/></button>
</li>
<li className="btn">
<button className="icon-btn"><FaPlus/></button>
</li>
<li className="btn">
<button className="icon-btn"><AiTwotoneBell/></button>
</li>
<li className="btn">
<button className="icon-btn"><BsFillPersonFill/></button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
navbar.css
* {
margin:0;
padding:0;
box-sizing:border-box;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
text-align: center;
justify-content: center;
padding-left: 25%;
color:#00ce7f;
}
#nav-bar {
background-color: #626466;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
height: 55px;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 70%;
border: none;
padding-left: 10px;
font-size: 20px;
}
.search {
padding-left: 15%;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
padding-right: 20px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
font-size: x-large;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-size: large;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 40px;
border: none;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
Try adding something like this to your css:
button[class*="icon-"],
button.searchBtn {
display: flex;
justify-content: center;
align-items: center;
}
This should center you're icon inside the button. If this doesn't work maybe check the size of the icon in F12 browser mode. Sometimes there are icons which does look like there having the same height and width, but they don't.
Another solution would be using position: absolute trick
button[class*="icon-"],
button.searchBtn {
position: relative;
}
button[class*="icon-"] > svg,
button.searchBtn > svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Hope this works for you :D
There is no need of changing so many things. Since you're using display flex for the parent, the elements position themselves next to each other. In order to make them take equal space (I think that's what you want) you need to use flex wrap for the children.
ul {
display:flex;
}
li {
flex-wrap: 1;
}
Related
i have created a simple react project and i was trying to implement drop down list in it.
i am trying to create a dropdown list for profile in react like this->
dropdown.js
import React, { useState } from "react";
import "./style.css";
function DropdownNavbar() {
const [toggle, setToggle] = useState(false);
const menuToggle = () => {
setToggle(!toggle);
};
return (
<>
<div className="new-box d-flex" onClick={menuToggle}>
<div className="profile p-2 flex-fill">
<img src="images/avatar-img.png" />
</div>
<div className="name-text p-2 flex-fill">Alex John</div>
</div>
{toggle && (
<div class="menu">
<ul>
<li>
My profile
</li>
<li>
Inbox
</li>
<li>
Logout
</li>
</ul>
</div>
)}
</>
);
}
export default DropdownNavbar;
style.css
.new-box{
display: flex;
}
.name-text{
margin-top: 15px;
}
.profile {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
margin: 5px 10px 5px 0px;
}
.profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
.menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.menu ul li:hover img {
opacity: 1;
}
.menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.menu ul li:hover a {
color: #ff5d94;
}
i am adding this profile thing in my navbar. navbar is being rendered in App.js
when i click on div nothing happens. can someone help here?
Mistake in handler
It should be:
onClick={menuToggle}
And dont use class - use className, not directly DOM - use useState hook.
Example:
const [isOpen, setIsOpen] = useState(false);
const menuToggle = () => {
setIsOpen((prev) => !prev);
};
<div className={isOpen ? "menu active" : "menu"}>
//...
https://codesandbox.io/s/kind-rgb-wlwlgf
found a better way to implement drop down (on hover) instead of onclick.
Dropdown.js
import React from "react";
import { AiFillCaretDown } from "react-icons/ai";
import "./style.css";
function DropdownNavbar() {
return (
<div className="dropdown">
<button className="dropbtn">
<div className="new-box d-flex">
<div className="p-2 flex-fill">
<img src="images/avatar-img.png" />
</div>
<div
style={{ marginTop: "5px", marginLeft: "10px" }}
className="p-2 flex-fill"
>
<span className="dropdown-text">Alex John</span>
</div>
<div
style={{ marginTop: "8px", marginLeft: "10px" }}
className="p-2 flex-fill"
>
<AiFillCaretDown />
</div>
</div>
</button>
<div className="dropdown-content">
Profile
Help
Logout
</div>
</div>
);
}
export default DropdownNavbar;
style.css
.dropdown {
float: left;
overflow: hidden;
margin-top: 5px;
}
.dropdown img {
width: 40px;
height: 40px;
}
.dropdown-text {
color: Black;
}
.new-box {
display: flex;
}
.dropdown .dropbtn {
margin-right: 30px;
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
}
.dropdown:hover .dropbtn {
background-color: #d8d8d8;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #d8d8d8;
}
.dropdown:hover .dropdown-content {
display: block;
}
I'm building a navigation menu on my website and I've ran into a problem regarding a dropdown sub-menu on mobile. On desktop, using w3Schools as a reference, I created a sub-menu that displays a ul on hover.
On mobile, however, I'm having two problems:
The first is that I want to be able to click to open the menu. I've tried to look into solutions for having a clickable menu toggle on mobile and a hover toggle on desktop, but I don't know much about javascript and wouldn't know where to start. I've also tried making the menu open by clicking on both desktop and mobile, but I would prefer if it was hoverable on desktop.
I also want the menu to display differently on mobile and tablet. I want it to be a block that spans the width of my popout sidebar rather than a popup as it is on desktop. I've tried to style the menu differently to make it fit my vision (almost like an accordion dropdown), but it opens over the top of my other list items. Instead, I want it to open and push down the list items.
Any help would be appreciated!
Here's my code (this version includes a click-to-open menu on desktop and mobile):
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function subOpen() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.sub-menu-link')) {
var dropdowns = document.getElementsByClassName("sub-menu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//Code for hamburger menu toggle
const menuBtn = document.querySelector(".menu-btn");
let menuOpen = !1;
menuBtn.addEventListener("click", () => {
menuOpen ? (menuBtn.classList.remove("open"), menuOpen = !1, document.documentElement.style.overflow = "scroll", document.body.scroll = "yes") : (menuBtn.classList.add("open"), menuOpen = !0, document.documentElement.style.overflow = "hidden", document.body.scroll = "no")
})
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #333;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.header-cont,
.nav-link {
align-items: center;
}
.header-nav,
.nav-item {
height: 60px;
}
.header {
background: #fff;
box-shadow: 0 0 10px -3px rgb(0 0 0 / 50%);
}
.header-cont {
display: flex;
max-width: 1350px;
margin: auto;
justify-content: space-between;
padding: 0 1rem 0 1rem;
box-sizing: border-box;
}
.nav-link,
.sub-menu-link {
padding: 0 1rem 0 1rem;
font-weight: 600;
color: #0f0f0f !important;
cursor: pointer;
}
.sub-menu-link:after {
position: absolute;
right: 15px;
content: "⌃";
font-size: 15px;
border: none;
transform: rotate(180deg);
visibility: hidden!important;
}
.header-menu {
margin-right: 20px;
}
.header-menu li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.only-mobile {
display: none !important;
}
.nav-item,
.nav-link {
display: inline-block;
}
.nav-item {
line-height: 60px;
}
.drop-chevron {
margin-left: 10px;
height: 13px;
fill: #0f0f0f;
}
.nav-item:hover svg {
fill: #00007a !important;
}
.nav-item:hover {
background-color: #00007a0d;
transition: background-color 0.3s;
}
.nav-link:hover,
.sub-menu-link:hover {
color: #00007a !important;
transition: 0.3s;
text-decoration: none !important;
}
.sub-menu {
position: relative !important;
}
.sub-menu-link {
display: inline-block !important;
text-decoration: none !important;
}
#check,
.checkbtn {
display: none;
}
.sub-menu-content {
display: none;
margin-top: -0.1rem;
background-color: #fff !important;
box-shadow: 0 6px 14px -1px rgb(0 5 20 / 15%);
border-radius: 3px;
overflow: hidden;
position: absolute;
width: 200px;
z-index: 1000;
}
.sub-menu-content ul {
list-style-type: none;
line-height: 30px;
}
.sub-item {
width: 200px;
margin-left: -0.5rem;
}
.sub-menu-content li:last-child {
border-bottom: 1px solid transparent !important;
padding-bottom: 0.1rem !important;
margin-bottom: -0.2rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 0.8rem;
margin-left: -2rem;
text-decoration: none;
display: block;
text-align: left;
border-left: solid 4px transparent;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: 4px solid #ff9f1c;
background-color: #00007a0d;
color: #00007a !important;
}
/*.sub-menu:hover .sub-menu-content {
display: block;
}*/
.checkbtn {
font-size: 20px;
color: #00007a;
float: right;
line-height: 60px;
margin-right: 1rem;
cursor: pointer;
}
#media (max-width: 1025px) {
selector .header-logo {
margin-top: 0.1rem;
padding-top: 0;
}
.header-cont {
justify-content: space-between;
}
.only-mobile,
.sub-menu-link {
display: block !important;
}
.checkbtn,
.nav-link,
.sub-menu {
display: block;
}
.drop-chevron {
display: none;
}
.sub-menu-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
position: relative!important;
box-shadow: none;
border-radius: 0px!important;
}
.sub-menu-link:after {
visibility: visible!important;
}
.sub-item {
border-top: none;
margin-left: -1rem;
margin-top: 0rem;
margin-bottom: 0px;
box-sizing: border-box;
line-height: 3rem;
border-bottom: solid 1px #B5B5B5;
}
.sub-menu-content li:last-child {
padding-bottom: 0rem!important;
margin-bottom: 0rem;
}
.sub-menu-content a {
color: #0f0f0f;
width: 100%;
padding: 8px;
margin-left: 0rem;
text-decoration: none;
display: block;
border-left: none;
}
.sub-menu-content a:hover {
text-decoration: none;
border-left: none;
background-color: #00007a0d;
color: #00007a!important;
}
.header-menu {
position: absolute;
margin-top: 60px;
width: 80%;
height: 100vh;
background: #e8e8e8;
left: -100%;
text-align: left;
transition: 0.5s;
margin-right: 0;
padding: 0;
box-shadow: rgb(18 18 18 / 8%) 4px 4px 12px 0;
overflow: hidden!important;
}
.header-menu li:first-child {
margin-top: 0;
}
.header-menu :last-child {
padding-bottom: 0 !important;
}
.nav-item {
border-top: none;
margin-left: 0;
box-sizing: border-box;
border-bottom: 1px solid #b5b5b5;
width: 100%;
text-align: left;
line-height: 60px;
height: 60px;
display: block;
}
.nav-link:hover,
.sub-menu-link:hover {
background: #00007a0d;
transition-duration: 0.25s;
}
#check:checked~ul {
left: 0;
}
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 22px;
height: 60px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.menu-btn__burger,
.menu-btn__burger::after,
.menu-btn__burger::before {
width: 22px;
height: 2.5px;
background: #00007a;
border-radius: 3px;
transition: 0.3s ease-in-out;
}
.menu-btn__burger::after,
.menu-btn__burger::before {
content: "";
position: absolute;
}
.menu-btn__burger::before {
transform: translateY(-6.5px);
}
.menu-btn__burger::after {
transform: translateY(6.5px);
}
.menu-btn.open .menu-btn__burger {
background: 0 0;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg);
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.submenu {
list-style-type: none!important;
}
.subitem {
padding: 15px;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu:after {}
.has-submenu>a::after {
line-height: 16px;
font-weight: 600;
font-size: 15px;
border: none;
color: #0f0f0f;
padding-right: 0.3rem;
padding-top: 0.2rem;
display: inline-block;
content: "⌃";
transform: rotate(180deg);
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
background-color: #111;
border-radius: 3px;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background: #111;
}
.submenu-active {
border-radius: 0;
}
<div class="header">
<div class="header-cont">
<div class="header-logo">
<a aria-hidden="true" href="/">
LOGO
</a>
</div>
<nav class="header-nav">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
</label>
<ul class="header-menu">
<li class="nav-item">
<div class="sub-menu">
<a onclick="subOpen()" class="sub-menu-link">link 1<svg class="drop-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg></a>
<div id="myDropdown" class="sub-menu-content">
<ul>
<li class="sub-item">sub link 1</li>
<li class="sub-item">sub link 2</li>
<li class="sub-item">sub link 3</li>
<li class="sub-item">sub link 4</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">link 2</li>
<li class="nav-item">link 3</li>
<li class="nav-item">link 4</li>
</ul>
</nav>
</div>
</div>
Add this to your CSS:
#media(min-width: 1025px){
.sub-menu:hover .sub-menu-content {
display: block;
}
}
This will make sure when the screen width is larger than 1025px (such as on a desktop and not mobile) your hover function will work to show the sub menu.
I want the search button to occupy all the space vertically
I have tried setting the height to 100% of the parent container but not working, I have tried setting the flex-basis to 100%/0/auto (not working). Look at my Code below and see the picture of the btn beside the input.
I want that btn to gain the height equal to the height of the input
See the Problem here
My Html:
<div className="search_subContainer">
<input
className="searchCity"
type="text"
value={value}
placeholder="Search city..."
onFocus={() => {
setFocus(!focus);
}}
onBlur={() => {
setFocus(!focus);
}}
onChange={handleChange}
/>
<button className="search_btn">
<IoSearch />
</button>
</div>
My Css:
.header .search_subContainer {
display: flex;
align-items: center;
align-content: stretch;
height: 100%;
border: 2px solid brown;
border-radius: 5px;
}
.header .searchCity {
width: 17em;
height: 100%;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header .searchCity:focus {
background-color: rgba(255, 255, 255, 0.719);
}
.search_btn {
width: 3em;
flex: 1;
height: 100%;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.search_btn:hover {
background-color: cadetblue;
}
The culprit is caused by align-items: center. Adding that to a flex container with a direction of row aligns the flex children to the center vertically.
To fix this, remove that line and the search button should align with the input element.
Fix
.search_subContainer {
display: flex;
border: 2px solid brown;
border-radius: 5px;
}
Doing this also means no need to add a height and flex: 1 to the input container, input element, and button itself.
So
.search_btn {
width: 3em;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.searchCity {
width: 17em;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Just remove align-items: center; for container and container become stretch. Then you can align the icon inside the button using flex. It's the simplest and correct way, IMHO.
There Your go:
please avoid explicit height and width
simple:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
.header{
padding: .5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 2px solid black;
}
.search-bar {
padding: 10px;
border: 1px solid lightgray;
margin-left: -5px;
}
.search-bar::placeholder {
color: black;
}
.submit-btn {
background-color: blue;
color: white;
padding: 11px;
font-size: 12px;
border-style: none;
margin-left: -5px;
}
<div class="header">
<div>
<a href='/'>tanjiro</a>
</div>
<div>
<input type="search" placeholder="Awesome" class="search-bar">
<button type="button" class="submit-btn">Search</button>
</div>
</div>
I made a search box with CSS grid that shrinks when you shrink the page. But, for some reason, it won't shrink as much as it I think it should be able to.
Here is how it looks fully extended:
Here is how it looks shrunken down:
How could I make the width of the search bar shrink down enough with the page so that the search button doesn't switch to the buttom?
Navbar.js
import React from 'react';
import { BsFillPersonFill } from 'react-icons/bs';
import { FiMail } from 'react-icons/fi';
import { FaPlus, FaSearch } from 'react-icons/fa';
import { AiTwotoneBell } from 'react-icons/ai';
import './navbar.css';
function Navbar() {
return (
<nav id="nav-bar">
<div className="container">
<h2 className="homeBtn">VIZZEY</h2>
<div className="search">
<input type="search" className="form-control" />
<button className="searchBtn">o</button>
</div>
<ul className="ugh-buttons">
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
<li className="btn">
<button className="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
)
}
export default Navbar;
Navbar.css
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
Try adding display: flex on the .search rule:
* {
margin: 0;
}
ul {
list-style: none;
display: flex;
}
a {
text-decoration: none;
color: #fff;
}
.homeBtn {
height: 55px;
text-align: center;
justify-content: center;
padding: auto;
}
#nav-bar {
background-color: #888888;
overflow: hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 6fr 1fr;
align-items: center;
}
ul li a {
padding: 1.6rem;
font-weight: bold;
}
.form-control {
background-color: rgb(255, 255, 255);
border-color: rgb(133, 133, 133);
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
height: 38px;
width: 90%;
flex: auto;
border: none;
padding-left: 10px;
justify-content: center;
}
.homeBtn {
background-color: #00ce7f;
}
.search {
padding-left: 10px;
display: flex; /* added */
}
.btn {
padding-right: 10px;
}
.ugh-buttons {
margin-right: 10px;
}
.icon-btn {
height: 40px;
width: 40px;
border-radius: 5px;
background-color: #00ce7f;
color: white;
border: none;
padding-left: 5px;
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:active {
outline: none !important;
box-shadow: none !important;
background-color: rgb(111, 0, 255);
}
button:focus {
outline: none !important;
box-shadow: none !important;
}
button:hover {
cursor: pointer;
}
.searchBtn {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 40px;
border: none;
font-weight: bold;
}
.buttons {
color: #fff;
background-color: #00ce7f;
height: 38px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align: center;
width: 40px;
border: none;
font-size: large;
font-weight: bold;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
input {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav id="nav-bar">
<div class="container">
<h2 class="homeBtn">VIZZEY</h2>
<div class="search">
<input type="search" class="form-control" />
<button class="searchBtn">o</button>
</div>
<ul class="ugh-buttons">
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
<li class="btn">
<button class="icon-btn">lol</button>
</li>
</ul>
</div>
</nav>
I have two examples of the same element side by side. I need to be able to toggle a class on only one at a time.
With my current Javascript they are both getting toggled at the same time.
This is part a style guide that backend developers use to build out the front end so I cant have extraneous classes that are only for the javascript.
This example is only for the style guide it works in the real application using groovy/grails.
Any tips are greatly appreciated!
$('.toggle-button-wrapper').on('click', function(e) {
$('.toggle-button').toggleClass("toggle-button-selected");
e.preventDefault();
});
.toggle-button-wrapper {
display: flex;
}
.toggle-btn-dark .toggle-button-wrapper {
margin-bottom: 0;
margin-right: 1rem;
}
.toggle-btn-dark .toggle-button {
display: inline-block;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 2.4rem;
background-color: #ccc;
color: black;
&:hover {
background-color: darken(#ccc, 5%);
}
}
.toggle-btn-dark .toggle-button .icon {
fill: black;
margin: auto;
}
.toggle-btn-dark .toggle-button-selected {
background: purple;
fill: white;
color: white;
&:hover,
&:active {
cursor: default;
background-color: lighten(purple, 5%);
}
}
.toggle-btn-dark .toggle-button-selected .icon {
fill: white;
}
.toggle-btn-light.toggle-button-wrapper {
margin-bottom: 0;
margin-right: 1rem;
}
.toggle-btn-light .toggle-button {
border: 1px solid #ccc;
display: inline-block;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 2.4rem;
background-color: pink;
color: black;
&:hover {
background-color: darken(pink, 5%);
}
}
.toggle-btn-light .toggle-button .icon {
fill: black;
margin: auto;
}
.toggle-btn-light .toggle-button-selected {
background-color: hotpink;
color: white;
&:hover,
&:active {
cursor: default;
background-color: darken(hotpink, 5%);
}
}
.toggle-btn-light .toggle-button-selected .icon {
fill: white;
}
.toggle-button.first{
border-left-style: none;
border-top-left-radius: 1.4rem;
border-bottom-left-radius: 1.4rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.toggle-button.last {
border-top-right-radius: 1.4rem;
border-bottom-right-radius: 1.4rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 style="margin-bottom: 10px;">Dark toggle</h4>
<div class="toggle-btn-dark">
<div class="toggle-button-wrapper">
<button class="toggle-button btn-card-mini first toggle-button-selected">
-
</button>
<button class="btn-card-big toggle-button last">
+
</button>
</div>
</div>
<br>
<h4 style="margin-bottom: 10px;">Light toggle</h4>
<div class="toggle-btn-light">
<div class="toggle-button-wrapper">
<button class="toggle-button btn-card-mini toggle-button-selected first" >
-
</button>
<button class="btn-card-big toggle-button last">
+
</button>
</div>
</div>
you could change the selector to
$('.toggle-button-wrapper').on('click', function(e) {
$(this).find('.toggle-button').toggleClass("toggle-button-selected");
e.preventDefault();
});
This basically prevents all toggle buttons from being selected and limits to children of the clicked wrapper