Skip to content
OverviewSolutions
27
Comments
2

Obiora Emmanuel

@Emmanuel-obioraLagos-island, Lagos.350 points

I am a self driven developer who believes in the tech space where everyone can grow together. If not properly guided one might get bored and tired seeing so many codes, truth be told it's simple to understand and this understanding will only come when one focuses on understanding the concept.

I’m currently learning...

Tailwind-CSS.

Latest solutions

View more solutions

Latest comments

  • Obiora Emmanuel•350
    @Emmanuel-obiora

    Good day. From your completed project I observed that your attribution class content is sitting close to the main content of the web also you have an accessibility issue to correct. To fix this kindly do the following;

    1. Change the 'div' with the class attribution to 'footer'
    2. Add the following code to the body landmark of your web page.
    body{
      display: grid;
      min-height: 100vh;
}
    1. Add the following to the footer tag or the class attribution.
    .attribution{
      margin-top: auto;
}

    I hope this is helpful. Happy coding!!!

  • Obiora Emmanuel•350
    @Emmanuel-obiora

    Good day. For your toggle button you can create a function that reveals or hides the navigation using pre-defined CSS property. First you will need to change the flow of your nav menu to vertical and adjust it to the right using CSS. second set the display of the nav className to

    nav{
display: none;
}

    then create a class element within your style sheet, i.e

    .reveal-nav{
display: flex; **depending on what you used**
}

    Once the above is completed, you will move over to JavaScript. you can use the code as follow.

    const Navigation = () => {
const show = document.getElementById('input-the-html-tag-you-set-to-none-here');

show.classList.add('reveal-nav');
}

    Then to hide the nav bar you use the reversal of what was written above

    const HideNav = () => {
const show = document.getElementById('input-the-html-tag-you-set-to-none-here');

show.classList.remove('reveal-nav');
}

    Finally add the onClick={HideNav} as the case maybe to the elements performing the functions. once the above is implemented your code should be working fine. But you will also need to create a background modal. add a div tag to your code and give it an id, then add the following CSS properties

    .modal{
display: block;
width: 100%;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

    However, you will need to call up the modal when showing and hiding the navigation bar. Just add the following to the functions above.

    const Navigation = () => {
const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
const modal = document.getElementById('add-modal-id-here');

show.classList.add('reveal-nav');
modal.classList.add('modal');
}

    And on close add the new lines.

    const HideNav = () => {
const show = document.getElementById('input-the-html-tag-you-set-to-none-here');
const modal = document.getElementById('add-modal-id-here');

show.classList.remove('reveal-nav');
modal.classList.remove('modal');
}

    This is a basic JavaScript function, I hope this helps in resolving your bug