I'm trying to make this component:
This is the component now :
Until now I succeeded to make with activeClassName the text to be colored blue when I'm on the right link. But I want also to have a point under the text every time I stay on that link ... I don;t know exact how to do that .
Below I will leave the code for you to understand what I did until now and what I suppose to do to make this work..
import { FC } from "react";
import { NavLink } from "react-router-dom";
// import observer from "mobx-react-lite"
import "./Navigation.css";
export const Navigation: FC = () => {
return (
<div className="nav">
<div className="logo">
<svg className="logo-image"></svg>
</div>
<div className="Center-links">
<ul className="pages">
<NavLink exact to="/" activeClassName="ceva" className="text">
<li className="row">Home</li>
</NavLink>
<NavLink to="/Bim" activeClassName="ceva" className="text">
<li className="row">Bim 2021</li>
</NavLink>
<NavLink to="/Regulations" activeClassName="ceva" className="text">
<li className="row">Regulations</li>
</NavLink>
<NavLink to="/History" activeClassName="ceva" className="text">
<li className="row">History</li>
</NavLink>
</ul>
</div>
<div className="Buttons-Right">
<h1>Button1</h1>
<h1>Button2</h1>
</div>
</div>
);
};
export default Navigation;
.logo-image {
mask: url("../assets/Images/logo.svg");
background-color: black;
width: 100px;
height: 65px;
margin: auto;
}
.nav {
height: 10vh;
width: 100%;
background: #6e68a7;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.Center-links {
height: 100%;
width: 60%;
display: flex;
justify-content: space-around;
align-items: center;
}
.pages {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 50%;
}
.Buttons-Right {
width: 20%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
.ceva {
color: #33c9d3;
}
.text {
text-decoration: none;
}
.row {
list-style: none;
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
You can do something like this:
li.row.active{
position:relative;
}
li.row.active::before{
content: ' ';
z-index: 999;
position: absolute;
bottom: 0;
right:50%;
width:4px;
height:4px;
background-color: red;
border-radius: 999px;
}
ul {
list-style: none;
}
li {
display: inline;
padding:5px;
}
<ul>
<li class="row active">
test 1
<li>
<li class="row">
test 2
<li>
<ul>
Related
I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for
With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>
I've tried now quite a time to figure out, why the closing symbol (X) is not displayed if I open my navbar.
If it is closed, everything seems fine.
In the Google Chrome dev tools the icon is still on the page, but in front-end it is not visible.
My environment:
macOS Monterey
VS Code with Live Preview extension
Google Chrome
Is there something I don't see?
Here is my index.html file (I know, the JavaScript should be in an own file ;-P):
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
<section>
<div class="toggle-box">
<a onclick="showMenu()" href="#">
<img class="menu" src="menu-outline.svg" />
<img class="close" src="close-outline.svg" />
</a>
</div>
<nav class="navigation">
Sec 1
Sec 2
Sec 3
Sec 4
</nav>
<div class="phone-logo">
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>
Elements which fall later in the document have a higher stacking order, meaning that they're layered over earlier elements. You can rearrange your markup to resolve that.
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
<section>
<nav class="navigation">
Sec 1
Sec 2
Sec 3
Sec 4
</nav>
<div class="toggle-box">
<a onclick="showMenu()" href="#">
<img class="menu" src="menu-outline.svg" />
<img class="close" src="close-outline.svg" />
</a>
</div>
<div class="phone-logo">
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>
It's just a matter of z-index for the .toggle-box.
section {
background-color: blue;
padding: 20px;
/* height: 40px; */
display: flex;
justify-content: space-between;
align-items: center;
}
img {
height: 30px;
width: auto;
}
.toggle-box a img {
filter: invert(1);
}
.img.menu.hide {
display: none;
}
img.close {
display: none;
}
img.close.show {
display: flex;
/* z-index: 9999; */
}
nav.navigation {
display: none;
}
nav.navigation.active {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
/* z-index: 1111; */
}
nav.navigation.active a {
padding: 20px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.phone-logo a img {
filter: invert(1);
}
.toggle-box {
z-index: 1;
}
<section>
<div class="toggle-box">
<a onclick="showMenu()" href="#">
<img class="menu" src="menu-outline.svg" />
<img class="close" src="close-outline.svg" />
</a>
</div>
<nav class="navigation">
Sec 1
Sec 2
Sec 3
Sec 4
</nav>
<div class="phone-logo">
<a href="#">
<img src="call-outline.svg" />
</a>
</div>
</section>
<script>
function showMenu() {
document.querySelector(".menu").classList.toggle("hide");
// document.querySelector(".close").classList.toggle("show");
document.querySelector(".navigation").classList.toggle("active");
}
</script>
</body>
The overflow x in my react Navbar not working as expected. The navbar is meant to slide in only when the Hamburger is clicked and not to show when not clicked. Everything works well except the fact that the overflow X that was supposed to hide keeps scrolling. Have tried a few things but yet not working.
Here is the link to the CodeSandbox
My Navbar and my CSS code are here below. Kindly help me look into this.
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { MdMenu } from "react-icons/md";
// import { MdClose } from "react-icons/md";
export default function Navbar() {
const[navLinkOpen, navLinkToggle] = useState(false)
const handleNavLinksToggle = () =>{
navLinkToggle(!navLinkOpen)
}
const renderClasses = () =>{
let classes = "navlinks";
if(navLinkOpen){
classes += " active"
}
return classes;
}
return (
<div>
<div className="container">
<nav>
<div className="logo">
Edie
</div>
<ul className={renderClasses()}>
<li className="link"> Home </li>
<li className="link"> Services </li>
<li className="link"> Our Works </li>
<li className="link"> Clients </li>
<li className="link"> Contacts </li>
</ul>
<IconContext.Provider value={{ color: "#000000", size: "30px", className: "icon" }}>
<div onClick={handleNavLinksToggle} className="hamburger-toggle">
<MdMenu/>
</div>
</IconContext.Provider>
</nav>
</div>
</div>
)
}
CSS
#import url('https://fonts.googleapis.com/css2?family=Heebo&family=Poppins&display=swap');
nav{
display: flex;
justify-content: space-between;
align-items: center;
}
.navlinks{
display: flex;
justify-content: space-evenly;
width: 50%;
align-items: center;
}
.logo{
width: 70px;
height: 53px;
}
.logo > a{
font-family: 'Heebo', sans-serif;
text-decoration: none;
font-style: normal;
font-weight: 800;
font-size: 36px;
line-height: 53px;
color: #333333;
}
.navlinks > li > a{
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 36px;
color: #333333;
}
.hamburger-toggle{
cursor: pointer;
display: none;
}
#media screen and (max-width: 1024px){
body{
overflow-x: hidden;
}
.hamburger-toggle{
display: block;
}
.navlinks{
display: none;
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 92vh;
align-items: center;
width: 100%;
top: 10vh;
background-color: red;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.active{
transform: translateX(0%);
}
}
For that you can use the position relative and additional width for html and body in global css.
It appears that browsers that parse the tag simply ignore overflow attributes on the html and body tags.
on Global CSS
html, body{
width: 100%;
position: relative;
}
here is what my services page currently looks like:
So when you choose one of the blue radio buttons, it loads the green radio buttons which are sub options, clicking on a green sub option will show the information for that specific product/service.
As you can see when you select a categeory and then a service, it all works correct but I need to add an "active-radio-button" class to the ones that are currently selected.
Similar to a nav bar showing which page is currently active.
I've tried giving each radio button a $ref and then I loop through all the refs to see if they are checked, however it doesnt work, I can't even figure out how to print each ref to the console (although I can see them in the Vue developer console).
Here is the service page:
<template>
<div class="services">
<div class="header services__header">
<h1 :class="$mq">Services</h1>
</div>
<div class="services__services-container">
<div class="select-wrapper">
<div
class="services__services-container__category-selection"
:key="`category-${index}`"
v-for="(item, index) in this.JSON"
>
<!-- GENERATE CATEGORIES -->
<input
v-model="currentCategory"
#change="UncheckRadio"
type="radio"
class="services__services-container__category-selection__category"
:class="$mq"
:value="item"
:ref="item.name"
/>
<label :for="item">{{ item.name }}</label>
</div>
</div>
<!-- GENERATE SERVICES -->
<div class="services__services-container__service-selection" v-if="currentCategory != null">
<div class="select-wrapper">
<div
class="services__services-container__service-selection__service"
:key="`option-${index}`"
:class="$mq"
v-for="(option, index) in currentCategory.options"
>
<input
type="radio"
class="services__services-container__service-selection__service__wrapper"
:class="$mq"
:value="option"
v-model="currentService"
:ref="option.optionName"
/>
<label :for="option">{{ option.optionName }}</label>
</div>
</div>
</div>
<!-- GENERATE DESCRIPTIONS -->
<div class="services__services-container__product-description" v-if="currentService != ''">
<div class="services__services-container__product-description__description" :class="$mq">
<div :class="$mq">
<img :src="currentService.images" alt />
<p>{{ currentService.description }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import services from "#/JSON/services.json";
export default {
name: "Services",
data: function() {
return {
JSON: [],
currentCategory: "",
currentService: ""
};
},
created: function() {
//TO TEST
this.JSON = services.services;
},
methods: {
UncheckRadio: function() {
this.currentService = "";
console.log("kek");
for (const ref in this.refs) {
console.log(ref.key);
}
}
}
};
</script>
<style lang="scss">
#import "#/scss/variables.scss";
#import "#/scss/button.scss";
#import "#/scss/header.scss";
#import "#/scss/input.scss";
.services {
width: 100%;
height: auto;
display: grid;
grid-template-rows: 15vh auto auto auto;
&__services-container {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
padding: 2rem;
&__category-selection {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
position: relative;
padding: 1rem;
cursor: pointer;
& input {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
& label {
cursor: pointer;
color: $colour-blue;
}
}
&__service-selection {
&__service {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
position: relative;
padding: 1rem;
cursor: pointer;
& input {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
& label {
cursor: pointer;
color: $colour-green;
}
}
}
/* For IE10 */
select::-ms-expand {
display: none;
}
&__product-description {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#include green-gradient;
padding: 2rem;
border-radius: 1.5rem;
&__description {
& img {
margin-bottom: 1rem;
height: 10rem;
width: 10rem;
object-fit: cover;
}
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
}
}
}
.select-wrapper {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
//
border-radius: 1.5rem;
position: relative;
width: auto;
height: auto;
margin-bottom: 1rem;
}
.select-icon {
font-size: 1rem;
color: $white;
position: absolute;
right: 0.5rem;
pointer-events: none;
}
.transition {
transition: all 0.25s linear;
}
.active-radio-button {
border-bottom: 0.1rem solid black;
}
</style>
No matter what I do, I can't remove the underline. I have the right element targeted, as I am able to change every other CSS style, but the underline stays every time. I've looked through about every other question regarding this and no method is working. Not even if I go into chrome dev tools, manually set the element's text-decoration to none.
Screenshot, React component code, and css code below. Link to github: https://github.com/andrewtyl/www.ajessen.com/
Screenshot of issue
React Component
import React from 'react'
import '../styles//App.css';
import '../styles/normalize.css';
import { Link } from 'react-router-dom';
class Header extends React.Component {
render() {
return (
<header>
<Link to="/">
<div id="ajessen-logo">
<img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
</div>
</Link>
<nav>
<ul>
<Link to="/">
<li>Home</li>
</Link>
<Link to="/services">
<li>Services and Skills</li>
</Link>
<Link to="/projects">
<li>Projects</li>
</Link>
<Link to="/about">
<li>About Me</li>
</Link>
<Link to="/contact">
<li>Contact Me</li>
</Link>
</ul>
</nav>
</header>
)
}
}
export default Header
app.css
/*
FONTS
Titles: Baloo Tamma 2
Subtitles/Large Text: DM Serif Text
Basic Text: Times New Roman
*/
#import url('https://fonts.googleapis.com/css?family=Baloo+Tamma+2|DM+Serif+Text&display=swap');
html {
font-family: 'Times New Roman', Times, serif;
}
h1 {
font-family: 'Baloo Tamma 2', cursive;
}
h2 {
font-family: 'DM Serif Text', cursive;
}
footer {
text-align: center;
margin-bottom: 10px;
margin-top: auto;
bottom: 10px;
left: auto;
right: auto;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
height: 100%;
}
header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
/*border-bottom: black solid 1px;*/
}
header > nav > ul > a > li {
text-decoration: none !important;
color: black;
}
header > nav {
width: 60%;
margin-bottom: 0px;
margin-top: auto;
display: flex;
}
header > nav > ul {
margin-bottom: 0px;
}
header > a {
width: 40%;
min-height: 125px;
margin-bottom: 0px;
}
header > nav > ul {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: flex-end;
width: 100%
}
#ajessen-logo {
width: 100%;
height: auto;
padding-top: 5%;
padding-left: 2.5%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: auto;
}
#ajessen-logo > img {
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: auto;
}
#github-footer-icon {
margin-top: auto;
margin-bottom: auto;
margin-left: 25%;
}
Two Things , Firstly,You need to change the import of the App.css file from
import "./styles//App.css";
to
import "./styles/App.css";
and the CSS property you want to use text-decoration not text-decoration-style and you want to apply it on the anchor no the list item
header > nav > ul > a {
text-decoration: none !important;
}
adding this CSS at the end of the App.css file fixes your issue
I had encountered an unkillable underline once, took me a while to clue in:
a {
...
background-repeat: repeat-x;
background-size: 2px 2px;
background-position: 0 100%;
}