Invisible menu

  • Resolved hj74

    (@hj74)


    9 months, 1 week ago

    After trying to improve my site I keep getting issue after issue and if anyone can help I’d be grateful.

    My menu disappeared but after putting some code in it came back but its invisible! I can click all the way down it but I just cant see it. Please help!

    The code I put in add css is :

    /* Ensure the mobile menu button is visible */
    .mobile-menu-button {
    display: block;
    cursor: pointer;
    }

    /* Style the menu toggle button */ menu-toggle {

    position: absolute;
top: 10px;
left: 10px;
z-index: 1001; /* Ensure it is above the menu */

    } hamburger, #cross {

    display: block;
width: 30px;
height: 2px;
background: #000;
margin: 6px 0;

    }

    /* Hide cross initially */ cross {

    display: none;

    }

    /* Show the hamburger initially */ menu-toggle.toggled #hamburger {

    display: none;

    } menu-toggle.toggled #cross {

    display: block;

    }

    /* Initially hide the navigation for mobile */ site-navigation {

    display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #101573; /* Background color for the menu */
z-index: 1000; /* Ensure it is on top */
transform: translateX(-100%); /* Hide off-screen initially */
transition: transform 0.3s ease-in-out;
overflow-y: auto; /* Enable scrolling if content is too tall */
color: #ffffff; /* Ensure text color is white */

    } site-navigation.toggled {

    display: block;
transform: translateX(0); /* Bring on-screen when toggled */

    }

    /* Style the menu items */ site-navigation .menu {

    list-style: none;
padding: 0;
margin: 0;

    } site-navigation .menu li {

    padding: 10px 20px;
border-bottom: 1px solid #ccc; /* Optional: Add a border between items */

    } site-navigation .menu li a {

    color: #ffffff !important; /* Ensure text color is white */
text-decoration: none;
display: block;

    }

    /* Style the mobile navigation / @media screen and (min-width: 768px) { .mobile-menu-button { display: none; / Hide the button on larger screens */
    }

    #site-navigation {
    display: block; /* Show the navigation on larger screens */
    position: relative;
    width: auto;
    height: auto;
    background-color: transparent;
    transform: none;
}

#site-navigation .menu li {
    display: inline-block;
    border: none;
}

#site-navigation .menu li a {
    color: #ffffff !important; /* Adjust for larger screens if needed */
}

    }

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator bcworkz

    (@bcworkz)

    Your menu looks OK when I just checked. Either you’ve resolved this since you posted this topic, or there’s an issue specific to your local browser or environment. I suspect local caching is your trouble. Try flushing your browser’s cache in order to force it to fetch the most recent CSS.

    I see you’re new here, welcome! In the future, please refrain from posting large amounts of code like you did directly in the topic. Instead use a resource like pastebin.com or gist.github.com and simply post the resulting link here. Directly posting brief snippets here (a dozen lines or so) is OK, it’s extensive code that should be posted elsewhere. In doing so, because of available line numbering and syntax highlighting, your code will be easier for others to review and comment upon. I’m not sure how your CSS code’s formatting in this topic got the way it is, but you can see that it’s a little hard to read when we’re used to seeing straight, unformatted code.

    Thread Starter hj74

    (@hj74)

    Hi – I replied to say i had issues still but i think my post was removed – did i do anything wrong?

    Moderator bcworkz

    (@bcworkz)

    I do not see any evidence of any deleted post nor evidence you’ve done anything wrong (besides maybe posting too much code ?? for which you’re forgiven)

    Thread Starter hj74

    (@hj74)

    I must have forgotten to press send!! I just wanted to know if you could help find a solution . The home page menu is working on desktop but not mobile. I can’t work it out. ??

    Moderator bcworkz

    (@bcworkz)

    There’s some kind of script added for mobile only that contains an error which prevents the script from properly toggling mobile menus.

    caught TypeError: Cannot read properties of null (reading 'insertAdjacentElement')
    at (index):503:8
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> ((index):502:12)

    Depending on how you view the source code, the line numbers in that error message may be incorrect. Use your browser’s developer tools to lead you to the correct spot in code. Put the tool in mobile emulator mode, then reload the page, then check the console.

    There’s this comment at the beginning of the problem script block:
    <!-- Add the JavaScript for mobile layout adjustment and menu toggle -->

    The problem code is:
    videos.insertAdjacentElement('afterend', paragraph);

    I’m unsure what the intent is here. I recommend seeking help through whomever developed this code.

    Thread Starter hj74

    (@hj74)

    Thanks for your brilliant advice – it worked!!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Invisible menu’ is closed to new replies.