Issue
I made a responsive web page and started from phones and small devices first then moved up to desktops view. But the problem is when I began designing how it should look on desktops and big screens I thought that I had only to make my nav bar displays again by changing this CSS line inside media queries to #myLinks {display: block;}
or #myLinks {display: flex;}
so it becomes visible again, yet nothing is happening. Note that the display value was set to none because in phones and tablets the nav bar could only show up by clicking the burger icon. And in desktops, I don't want the menu icon to be displayed and I want the nav bar to be displayed as a row on top of the page.
Link to the full code inside my GitHub repository : https://github.com/IssamAth/Waitlist-page/tree/master/src/components/navbarlogo
Here is the CSS code for the Nav bar,
#myLinks {
display: none;
}
#navbarlogo {
margin: 1rem 0 4rem 0;
}
.logo-menu {
display: flex;
justify-content: space-between;
}
nav {
text-decoration: none;
background: black;
border-radius: 0.5rem;
margin: 1rem 0;
}
.icon {
color: black;
}
.logo {
display: inline-block;
}
li a:link {color:#FFFAFA;}
li a:visited {color:#FFFAFA;}
li {
padding: 1rem;
}
/* MEDIA QUERIES ================ ( For Mobiles ) ================ */
@media screen and (min-width: 1024px) {
#myLinks {
}
nav {
margin: 0;
background: var(--color-bg);
}
li a:link {color:var(--color-primary);}
li a:visited {color:var(--color-primary);}
.icon {
display: none;
}
#navbarlogo {
display: flex;
justify-content: space-between;
}
.topnav #myLinks {
display: flex;
}
.topnav {
}
#navbarlogo {
}
}
Here is the layout
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
const navbarlogo = () => {
return (
<div id='navbarlogo'>
<div className="logo-menu">
<div className='logo'>
<img src={logo} alt="" />
</div>
<a href="#" class="icon" onClick={myFunction}>
<GiHamburgerMenu size = '28'/>
</a>
</div>
<nav class="topnav">
<ul id="myLinks">
<li><a href="#">Features</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Join Waitlist</a></li>
</ul>
</nav>
</div>
)
}
This is how it shows when I stretch the screen and the nav bar doesn't show up
And this how it displays in smaller screens
Solution
CHANGED ANSWER:
You should avoid changing the DOM directly if you are using React. You should instead use the api that React provides to achieve the desired functionality. Below is a fast solution I came up with, it could probably be done better but I dont work with plain css much so this is the best I could come up with.
CSS:
.mylinks{
display: block;
}
.topnav{
display: flex;
}
.topnavhide{
display: none;
}
#navbarlogo {
margin: 1rem 0 4rem 0;
}
.logo-menu {
display: flex;
justify-content: space-between;
}
nav {
text-decoration: none;
background: black;
border-radius: 0.5rem;
margin: 1rem 0;
}
.icon {
color: black;
}
.logo {
display: inline-block;
}
li a:link {color:#FFFAFA;}
li a:visited {color:#FFFAFA;}
li {
padding: 1rem;
}
@media screen and (min-width: 1024px) {
.mylinks{
display: flex;
}
nav {
margin: 0;
background: var(--color-bg);
}
li a:link {color:var(--color-primary);}
li a:visited {color:var(--color-primary);}
.icon {
display: none;
}
#navbarlogo {
display: flex;
justify-content: space-between;
}
.topnav{
display: flex;
}
.topnavhide{
display: flex;
}
#navbarlogo {
}
}
Javascript:
import React, {useState} from 'react'
import './navbarlogo.css'
import logo from '../../assets/Logo.svg'
import {GiHamburgerMenu} from 'react-icons/gi'
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
const Navbarlogo = () => {
const [displayTopNav, setDisplayTopNav] = useState(false)
return (
<div id='navbarlogo'>
<div className="logo-menu">
<div className='logo'>
<img src={logo} alt="" />
</div>
<a href="#" class="icon" onClick={() => setDisplayTopNav(!displayTopNav)}>
<GiHamburgerMenu size = '28'/>
</a>
</div>
<nav className={displayTopNav === true ? "topnav" : "topnavhide"}>
<ul className="mylinks">
<li><a href="#">Features</a></li>
<li><a href="#">Affiliates</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Join Waitlist</a></li>
</ul>
</nav>
</div>
)
}
export default Navbarlogo
Answered By - tadej
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.