Hamburger Menu X Button Position Absolute ISSUE

HTML-CSS
1

Hi there!
I can’t figure out why the X button does not align on top of the right side of the screen.
Can anybody help me to fix the code?

HTML:

<header className="navbar">
      <div className='language--switcher'><LanguageSwitcher /></div>
        <div className='nav--section'>
          <img className='nav--logo' src="/public/images/esc-full-logo-black.png" alt="" />
        <nav ref={navRef}>
             <div className='nav--links'><Link to="header" smooth={true} duration={500} onClick={showNavbar}>{t('menu.home')}</Link></div>
             <div className='nav--links'> <Link to="about" smooth={true} duration={500} onClick={showNavbar}>{t('menu.about')}</Link></div>
             <div className='nav--links'><Link to="projects" smooth={true} duration={500} onClick={showNavbar}>{t('menu.project')}</Link></div>
             <div className='nav--links'> <Link to="services" smooth={true} duration={500} onClick={showNavbar}>{t('menu.services')}</Link></div>
             <div className='nav--links'> <Link to="contact" smooth={true} duration={500} onClick={showNavbar}>{t('menu.contact')}</Link></div>
          <button
            className="nav-btn nav-close-btn"
            onClick={showNavbar}>
            <FaTimes />
          </button>
        </nav>

        <button
          className="nav-btn"
          onClick={() => navRef.current.classList.toggle("responsive_nav")}>
          <FaBars />
        </button>
        </div>
    </header>

CSS:

@media only screen and (max-width: 1024px) {

    .nav-btn{
        display:contents;
    }

    .nav--logo{
        width: 30%;
    }

    .navbar {
        position: sticky;
        top: 0;
        z-index: 100;
        /* Other styles */
      }

    .nav--section {
        max-width: 100%;
        height: 80px;
        padding: 0 2rem;
        background-color: var(--bgMenu);
        color: var(--white);
        border-radius: 0rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
	.nav--section .nav-btn {
		visibility: visible;
		opacity: 1;
	}

	.nav--section nav {
		position: fixed;
		top: -105vh;
		left: 0;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1.5rem;
		background-color: var(--bgMenu);
		transition: 0.3s;
	}

	.nav--section .responsive_nav {
		transform: translateY(100vh);
	}

    .nav--section .nav-close-btn {
        position: absolute;
        top: 1rem;
        right: 5rem;
        font-size: 2.5rem;
    }

	nav a {
		font-size: var(--step-2);
        color: var(--navLink-950);
	}
}

Screenshot 2023-05-14 at 17.24.05
Screenshot 2023-05-14 at 17.24.05810×1412 21.9 KB

Thank you for the help.
P.

2

Try position relative for the navbar and the position absolute for the button and try moving it into place with some top bottom left values respectively

3

Hi there!
Is not working.

.navbar {
        position: sticky;
        top: 0;
        z-index: 100;
        position: relative;
      }

 .navbar .nav-close-btn {
        position: absolute;
        top: 1rem;
        right: 5rem;
        font-size: 2.5rem;
    }

I can’t identify the problem…

What could be the reason?

4

You need to give us the finished product, the actual HTML being used, not the JSX you are using in your project.

1 Like
5

I would assume it has to do with display: contents

1 Like
6

Thanks for the suggestion!
I fixed replacing display: content with display: block and now it works great.

Cheers.
P.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.