I would like to add an animation for when you open the nav links menu on smaller screens. I dont really understand transitions and couldnt find a great source that would tell me how to do it this way. Was wondering if i could have any suggestions on how to do it.
The section I would like to animate is the dropdown that appears when you click the hamburger menu. So that it slowly opens from top to bottom.
Similarly to what w3 did here but vertically rather than horizontally.
https://www.w3schools.com/w3css/w3css_sidebar.asp
Image for reference:
function ToggleNavLinks() {
var navLink = document.getElementsByClassName("nav-links")[0];
if (window.getComputedStyle(navLink).display === "none") {
navLink.style.display = "flex";
} else {
navLink.style.display = "none";
}
}
.navbar {
justify-content: space-between;
position: relative;
background-color: var(--bg-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-links {
height: 100%;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
font-size: 1.5rem;
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
.nav-links li a:hover {
color: #4c6bc1;
}
.nav-toggle {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
}
.nav-toggle:hover {
cursor: pointer;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links ul {
width: 100%;
flex-direction: column;
}
.nav-links li {
text-align: center;
}
.nav-links.active {
display: flex;
}
<body>
<header>
<nav class="navbar">
<img class="logo" alt="logo" src="https://via.placeholder.com/80">
<a class="nav-toggle" onclick="ToggleNavLinks()">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!-- Links used in the navbar -->
<div class="nav-links">
<ul>
<li>
Home
</li>
<li>
Projects
</li>
<li>
Contact
</li>
</ul>
</div>
<svg class="theme-toggle" alt="Icon used for toggling dark mode" aria-hidden="true" focusable="false" data-prefix="far" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"></path></svg>
</nav>
</header>
<div>
{{{body}}}
</div>
</body>
Related
I am trying to convert a react made responsive navbar component into next js navbar component. I don't know much about next js. Can anyone help with this code.The responsiveness works just fine. However, I cannot close the hamburger menu once I clicked it. The issue is with close Hamburger menu button. Here is the navbar component code converted from React js app:
import React from 'react';
import React from 'react';
import { GiHamburgerMenu } from 'react-icons/gi';
import { MdOutlineRestaurantMenu } from 'react-icons/md';
import Image from "next/image";
import styles from "../styles/Navbar.module.css"
const Navbar = () => {
const [toggleMenu, setToggleMenu] = React.useState(false);
return (
<nav className={styles.app__navbar}>
<div className={styles.app__navbar_logo}>
<Image src="/img/ephielogo.png" alt="app__logo" />
</div>
<ul className={styles.app__navbar_links}>
<li className={styles.p__opensans}>Home</li>
<li className={styles.p__opensans}>About</li>
<li className={styles.p__opensans}>Menu</li>
<li className={styles.p__opensans}>Awards</li>
<li className={styles.p__opensans}>Contact</li>
</ul>
<div className={styles.app__navbar_login}>
<a href="#login" className={styles.p__opensans}>Log In / Registration</a>
<div />
<a href="/" className={styles.p__opensans}>Book Table</a>
</div>
<div className={styles.app__navbar_smallscreen}>
<GiHamburgerMenu color="#fff" fontSize={27} onClick={() => setToggleMenu(true)} />
{toggleMenu && (
<div className={styles["app__navbar_smallscreen_overlay"] + " " + styles["flex__center"] + styles["slide_bottom"]}>
<MdOutlineRestaurantMenu fontSize={27} className="overlay__close" onClick={() => setToggleMenu(false)} />
<ul className={styles.app__navbar_smallscreen_links}>
<li><a href="#home" onClick={() => setToggleMenu(false)}>Home</a></li>
<li><a href="#about" onClick={() => setToggleMenu(false)}>About</a></li>
<li><a href="#menu" onClick={() => setToggleMenu(false)}>Menu</a></li>
<li><a href="#awards" onClick={() => setToggleMenu(false)}>Awards</a></li>
<li><a href="#contact" onClick={() => setToggleMenu(false)}>Contact</a></li>
</ul>
</div>
)}
</div>
</nav>
);
};
export default Navbar;
Here is my Navbar.Module.css code.
.app__navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--color-black);
padding: 1rem 2rem;
}
.app__navbar_logo {
display: flex;
justify-content: flex-start;
align-items: center;
}
.app__navbar_logo img {
width: 150px;
}
.app__navbar_links {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-white);
list-style: none;
}
.app__navbar_links li {
margin: 0 1rem;
cursor: pointer;
}
.app__navbar_links li:hover {
color: var(--color-grey);
}
.app__navbar_login {
display: flex;
justify-content: flex-end;
align-items: center;
}
.app__navbar_login a {
margin: 0 1rem;
text-decoration: none;
transition: .5s ease;
color: var(--color-white)
}
.app__navbar_login a:hover {
border-bottom: 1px solid var(--color-golden);
}
.app__navbar_login div {
width: 1px;
height: 30px;
background: var(--color-grey);
}
.app__navbar_smallscreen {
display: none;
}
.app__navbar_smallscreen_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: var(--color-black);
transition: .5s ease;
flex-direction: column;
z-index: 5;
}
.app__navbar_smallscreen_overlay .overlay__close {
font-size: 27px;
color: var(--color-golden);
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
}
.app__navbar_smallscreen_links {
list-style: none;
}
.app__navbar_smallscreen_links li {
margin: 2rem;
cursor: pointer;
color: var(--color-golden);
font-size: 2rem;
text-align: center;
font-family: var(--font-base);
}
.app__navbar_smallscreen_links li:hover {
color: var(--color-white);
}
#media screen and (min-width: 2000px) {
.app__navbar_logo img {
width: 210px;
}
}
#media screen and (max-width: 1150px) {
.app__navbar_links {
display: none;
}
.app__navbar_smallscreen {
display: flex;
}
}
#media screen and (max-width: 650px) {
.app__navbar {
padding: 1rem;
}
.app__navbar_login {
display: none;
}
.app__navbar_logo img {
width: 110px;
}
}
I would like to know how to restore to the default style of NavLink as marked in the screenshot below. The color should be white and without the underlines. You would find my code below the screenshot:
Home is the default path that is currently selected. The activeClass property on this is working as it should.
The code:
const NavBar = () => {
return(
<div className="navBar">
<div className="logo">LOGO</div>
<div className="navOptions">
<ul>
<li>
<NavLink exact activeClassName="activeClass" to="/">Home</NavLink>
</li>
<li>
<NavLink exact activeClassName="activeClass" to="/advanceFilter">Advanced Search</NavLink>
</li>
<li>
<NavLink exact activeClassName="activeClass" to="viewAll">View All</NavLink>
</li>
<li>Logout</li>
</ul>
</div>
</div>
);
}
export default NavBar;
The CSS:
.navBar {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
color: white;
font-weight: bold;
}
.logo {
display: flex;
flex: 1;
align-items: center;
padding-left: 50px;
}
.navOptions {
display: flex;
justify-content: flex-end;
flex: 1;
height: 100%;
}
//The li items don't have the color and text-decoration properties on them
li {
display: inline;
margin-right: 20px;
cursor: pointer;
height: 100%;
text-decoration: none;
color: white;
}
li:hover {
background-color: gray;
}
ul {
margin-right: 40px;
list-style-type: none;
}
.activeClass {
text-decoration: none;
color: purple;
}
The NavLink component renders an anchor <a /> tag, update the selector in your CSS to also target anchor tags that are children of li elements.
li, li a {
display: inline;
margin-right: 20px;
cursor: pointer;
height: 100%;
text-decoration: none;
color: white;
}
Alternatively you could also specify a "navlink" class and apply default non-active CSS styling there.
I am making a pretty simple bottomnav for a project I am working on, and I am having difficulty with the view in mobile mode. From standard desktop, I have a pretty simple, bottomnav with 4 icons, however when I inspect the page in mobile view, it only shows you either the first, or the first and 2nd icon. all of my styling for this component is:
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: rgb(75, 90, 72);
overflow: hidden;
position: absolute;
bottom: 0;
min-width:800px;
height:64px;
/* width: 100%; */
}
.navCont {
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
.navButton {
margin-left:10vh;
margin-right:10vh;
min-width:10px;
}
.navButtonLeft {
margin-left:10vh;
margin-right:10vh;
min-width:10px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
img {
width:32px;
height: auto;
float:left;
margin-bottom: 20px;
}
#media screen and (max-width: 100px) {
.navbar {
display: inline-block;
height:64px;
}
.navCont {
display: flex;
align-content: space-between;
}
.navButton,
.navButtonLeft {
padding: none;
display: inline-block;
}
img {
display: inline-block;
}
}
Any advice or tips would be greatly appreciated!
edit: Here is the component i am working with.
import React from "react";
import home from "./home.png"
import post from "./post.png"
import profile from "./profile.png"
import search from "./search.png"
import "./Footer.css";
class Footer extends React.Component {
render() {
return (
<div class="navCont">
<div class="navbar">
<img src={home} alt="home icon"/>
<img src={profile} alt="home icon"/>
<img src={post} style={{width:"44px", height: "auto"}} alt="home icon"/>
<img src={search} style={{width:"44px", height: "auto"}} alt="home icon"/>
</div>
</div>
);
}
}
export default Footer;
I've revamped your css to use flexbox for laying out the icons in a row; got rid of all the floats and some other rules that seemed unnecessary. I'm not sure this does exactly what you're trying to do (since I don't know exactly what you're trying to do) but I think this is at least a better starting point.
.navCont {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: rgb(75, 90, 72);
}
.navbar {
height: 64px;
display: flex;
justify-content: center;
}
/* Style the links inside the navigation bar */
.navbar > * {
flex: 0 0 auto;
padding: 14px 16px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
img {
width: 32px;
max-width: 100%;
height: auto;
}
<div class="navCont">
<div class="navbar">
<a href="/" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000/?text=A" />
</a>
<a href="Profile" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=B" />
</a>
<a href="Post" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=C" />
</a>
<a href="Search" class="navButton">
<img src="https://via.placeholder.com/64x64.png/fff/000?text=D" />
</a>
</div>
</div>
I have noticed the problem of certain letters overflowing their container on the left side, but I haven't seen anyone actually bringing up the problem.
I've tried between a few different font-families, but they all seem to have the same problem.
JSFIDDLE: https://jsfiddle.net/3h5poynt/
HTML (angular)
<div class="personal-profile container-column">
<mat-card class="header">
<section class="cover-section"></section>
<section class="intro-section">
<div class="intro-header">
<div class="profile-photo-wrapper">
<img src="/assets/img/profile-picture-placeholder.png" alt="" class="profile-photo" />
</div>
<div class="badges-container">
<ul class="badges-list">
<li>
<img
src="/assets/badges/business-plans-180x180.png"
alt="Business plan"
matTooltip="Something"
matTooltipClass="badge-tooltip"
matTooltipPosition="above"
/>
</li>
<li><img src="/assets/badges/calling-customers-180x180.png" alt="Calling customers" /></li>
<li><img src="/assets/badges/finance-180x180.png" alt="Finance" /></li>
<li>
<img src="/assets/badges/selling-to-customers-180x180.png" alt="Selling to customers" />
</li>
<li><img src="/assets/badges/social-media-180x180.png" alt="Social media" /></li>
</ul>
</div>
</div>
<div class="info-container">
<div class="personal-info">
<div class="name-text">{{ profile ? profile.name : '' }}</div>
<div class="description">{{ profile ? profile.personal_description : '' }}</div>
</div>
<div class="additional-info"></div>
</div>
</section>
</mat-card>
SCSS
#import '../../../variables';
.mat-card {
padding: 0;
overflow: hidden;
section {
padding: 20px;
}
}
.badge-tooltip {
background: #3f51b5;
color: white;
font-family: $font-open-sans;
}
.personal-profile {
margin-top: 50px;
.header {
min-height: 500px;
width: 100%;
.cover-section {
background: url('/assets/img/coverpicture.png') center/cover;
height: 225px;
}
.intro-section {
.intro-header {
size: auto;
.profile-photo-wrapper {
position: relative;
margin-top: -87px;
display: inline-block;
.profile-photo {
width: 150px;
height: 150px;
border: 4px solid white;
border-radius: 10px;
box-shadow: inset 0 1.5px 3px 0 rgba(0, 0, 0, 0.15), 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
background-color: #fff;
}
}
.badges-container {
vertical-align: middle;
display: inline-block;
margin-top: -87px;
.badges-list {
list-style: none;
li {
float: left;
padding: 0 10px 0 10px;
img {
width: 40px;
height: 40px;
}
}
}
}
}
.info-container {
padding-top: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
font-family: $font-open-sans;
.personal-info,
.additional-info {
display: flex;
flex-direction: column;
}
.personal-info {
.name-text {
font-size: 1.3em;
}
}
}
}
}
}
Main SCSS
/* You can add global styles to this file, and also import other style files */
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
#import '_variables.scss';
* {
margin: 0;
padding: 0;
font-family: $font-open-sans;
}
html {
font-family: 'Roboto', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
background-color: #e9ebee;
}
.container-column {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.container-row {
display: flex;
flex-direction: row;
width: 80%;
margin: auto;
}
Is there something very essential that I am missing, or is this something that has to be hacked?
Jonas,
Some fonts are "just like that".
You will find that (especially with some of the more amateurish free fonts available nowadays) that some fonts' descenders, ascenders, ornaments, etc just overlap the borders that we (programmers, readers) expect them to conform to.
If you really want to use a font like this in this specific context, then you have to program around the font's limitations.
In your fiddle, I merely added padding-left to the name-text style:
.name-text{
font-size: 1.3em;
font-family: "Open Sans", sans-serif;
background: red;
padding-left:15px; /* voila! */
}
Give it a try in the fiddle.
If the left bearing is radically different on initial characters across the font, then you maybe able to set up various styles with padding that changes according to the substring value of the first character. Sounds like a bit of a living hell to program that, but if you really want it, there you go.
Or you could just pick a different font.
I am trying to figure out how to force my <li> items within my flexbox navigation bar to take up 100% of the height of the header.
The goal is to have an active class to display a blue bar when the user hovers over the item. I have mocked up my simple example here: https://codepen.io/anon/pen/jZzeqL
I have tried to mess with the align-items, but everything I do seems to break the center horizontal alignment.
/* header styles */
.header {
grid-area: header;
background-color: #444;
color: #fff;
align-items: center;
display: flex;
margin: 0 2em;
}
#logo {
font-weight: 300;
font-size: 160%;
}
#logo, nav {
flex: 1;
}
nav ul {
display: flex;
list-style: none;
justify-content: flex-end;
font-size: 110%;
}
nav li {
font-size: 14px;
padding: 0px 10px;
}
nav li span.active {
border-bottom: 3px solid #00A2D3;
}
nav li > .username {
font-weight: 400;
padding-right: 3px;
}
<header class="header">
<div id="logo">Dashboard</div>
<nav>
<ul role=navigation>
<li><span class="far-li"><i class="far fa-bell"></i></span></li>
<li><span class="fas-li"><i class="fas fa-cog"></i></span></li>
<li><span class="username active">test-email#gmail.com</span><span class="fas-li"><i class="fas fa-caret-down"></i></span></li>
</ul>
</nav>
</header>