Question

调整屏幕大小后导航链接似乎没有显示，我到处寻找问题，但似乎找不到解决方案，将显示设置更改为 flex/block/inline 但它没有好像有影响。我需要什么：将屏幕宽度更改为 768 像素以上后要显示的导航链接。 FaBar 是响应式的，但不是 NavLinks 元素（我最近在 vscode 中更改了我的主题，也许这就是我没有看到问题的原因。）

索引：

import React from 'react';
import { FaBars } from 'react-icons/fa'
import {
    Nav, 
    NavbarContainer,
    NavLogo,
    MobileIcon,
    NavMenu,
    NavItem,
    NavLinks,
    NavBtn,
    NavBtnLink 
} from './NavbarElements'; 

 const Navbar = () => {
    return (
        <>
        <Nav>
            <NavbarContainer>
                <NavLogo to="/"> Hey </NavLogo>
                    <MobileIcon>
                        <FaBars />
                        <NavMenu>
                            <NavItem>
                                <NavLinks to='about'>About</NavLinks>
                            </NavItem>
                            <NavItem>
                                <NavLinks to='discover'>Discover</NavLinks>
                            </NavItem>
                            <NavItem>
                                <NavLinks to='services'>Services</NavLinks>
                            </NavItem>
                            <NavItem>
                                <NavLinks to='signup'>Sign Up!</NavLinks>
                            </NavItem>
                        </NavMenu>
                        <NavBtn>
                            <NavBtnLink to='/signin'>Sign In</NavBtnLink>
                        </NavBtn>
                    </MobileIcon> 
            </NavbarContainer>
        </Nav>
        </>
    );
};
export default Navbar;

造型：

import styled from 'styled-components';
import {Link as LinkR} from 'react-router-dom';
 import {Link as LinkS} from 'react-scroll';

export const Nav = styled.nav`
background: #000;
height:80px;
/* margin-top:~80px;*/
display:flex;
justify-content: center;
align-items:center;
font-size: 1rem;
position:sticky;
top:0;
z-index:10;

@media screen and (max-width:960px){
    transition: 0.8s all ease;
}
`

export const NavbarContainer = styled.div`
 display: flex;
 justify-content: space-between;
 height:80px;
 z-index:1;
 width:100%;
 padding:0 24px;
 max-width: 1100px;
`
export const NavLogo = styled(LinkR)`
color: #fff;
justify-self: flex-start;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`


export const MobileIcon = styled.div`
display:none;

@media screen and (max-width: 760px){
    display:block;
    position:absolute;
    top:0;
    right:0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
    color:#fff;
}
`

export const NavMenu = styled.ul`
display:flex;
align-items:center;
list-style:none;
text-align:center;
margin-right:-22px;


@media screen and (max-width: 768px) {
    display:none;
}
`

export const NavItem = styled.li`
height: 180px;
color:red;
`

export const NavLinks = styled(LinkS)`
color:#fff;
display:flex;
align-items:center;
text-decoration:none;
padding:0 1rem;
height:100%;
cursor:pointer;

&.active{
    border-bottom:3px solid #01bf71;
}
`
export const NavBtn = styled.nav`
display:flex;
align-items:center;

@media screen and (max-width: 768px){
    display: none;
}
`
export const NavBtnLink = styled(LinkR)`
 border-radius: 50px;
 background:#01bf71;
 white-space:nowrap;
 padding:10px 22px;
 color: #010606;
 outline: none;
 border:none;
 cursor:pointer;
 transition: all 0.2s ease-in-out;
 text-decoration:none;

 &::hover {
     transition: all 0.2s ease-in-out;
     background: #fff;
     color: #010606;
 }

Answer 1

啊哈哈哈哈，一如既往的愚蠢简单的答案。 MobileIcons 元素隐藏了每个元素，因为结束标记一直在底部。它应该看起来像这样：

 <>
        <Nav>
            <NavbarContainer>
                <NavLogo to="/">Hey</NavLogo>
                    
                    <MobileIcon>
                        <FaBars />
                        </MobileIcon> 

                        <NavMenu>

                            <NavItem>
                                <NavLinks to='about'>About</NavLinks>
                            </NavItem>

                            <NavItem>
                                <NavLinks to='discover'>Discover</NavLinks>
                            </NavItem>

                            <NavItem>
                                <NavLinks to='services'>Services</NavLinks>
                            </NavItem>

                            <NavItem>
                                <NavLinks to='signup'>Sign Up!</NavLinks>
                            </NavItem>

                        </NavMenu>
                        
                        <NavBtn>
                            <NavBtnLink to='/signin'>Sign In</NavBtnLink>
                        </NavBtn>
                    
            </NavbarContainer>
        </Nav>
        </>

反应导航栏链接没有响应

1 个答案: