Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Menu

Sort by date Sort by votes
Thanks for your reply. Do you mean that the menu is opening on mobile but it's transparent?

This is my additional css - should i add something to it?
Code: 
 /* General header visibility */
header#masthead {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
    background-color: #101573 !important; /* Indigo color */
}

/* Ensure site branding and navigation are visible */
header#masthead .site-branding,
header#masthead .main-navigation {
    display: block !important;
    visibility: visible !important;
    color: #fff !important; /* Text color */
}

/* Ensure header right section is visible */
.header-right {
    display: block !important;
    visibility: visible !important;
    color: #fff !important; /* Text color */
    float: right !important;
    position: relative !important;
    margin: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Ensure phone number is visible */
.header-right .phone {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Ensure mobile menu button is visible */
.mobile-menu-button {
    display: block !important;
    cursor: pointer;
    color: #fff !important; /* Ensure text color is visible */
}

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

#site-navigation.toggled {
    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: #fff !important; /* Ensure text color is white */
    text-decoration: none;
    display: block;
}

/* Style the menu toggle button */
#menu-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001; /* Ensure it is above the menu */
}

#menu-toggle span {
    display: block;
    width: 30px;
    height: 2px;
    background: #ffffff;
    margin: 6px 0;
}

/* Hide cross initially */
#cross {
    display: none;
}

/* Show the hamburger initially */
#menu-toggle.open #hamburger {
    display: none;
}

#menu-toggle.open #cross {
    display: block;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    header#masthead {
        max-height: 70px; /* Adjust for mobile */
    }

    .single-artist header#masthead {
        max-height: 70px; /* Adjust for mobile */
    }

    .single-artist .enquire-now-button {
        display: none;
    }

    .mobile-menu-button {
        display: block !important;
        width: 20px; /* Adjust the width for mobile */
        height: 20px; /* Adjust the height for mobile */
    }

    #site-navigation {
        display: block !important;
    }

    h1, .h1, h2, .h2 {
        text-align: center; /* Center align the text */
    }

    h1 {
        font-size: 24px; /* Adjusted font size for tablets and small screens */
    }

    h2 {
        font-size: 20px; /* Adjusted font size for tablets and small screens */
    }

    .band-clips .link {
        font-size: 16px; /* Adjusted font size for links */
        padding: 8px 12px; /* Adjusted padding for links */
    }

    p, a, li {
        font-size: 14px; /* Ensure paragraph and link text is readable on mobile */
    }

    p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        width: 100%;
        box-sizing: border-box;
    }

    .enquire-now-button.mobile-enquire-now {
        display: block;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 1000; /* Ensure it stays on top of other elements */
        background-color: #005177; /* Background color */
        color: #ffffff; /* Text color */
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .contact-details.desktop-enquire-now {
        display: none;
    }
}

/* Smaller mobile adjustments */
@media (max-width: 480px) {
    h1 {
        font-size: 20px; /* Adjusted font size for small screens */
    }

    h2 {
        font-size: 16px; /* Adjusted font size for small screens */
    }

    .band-clips .link {
        font-size: 14px; /* Adjusted font size for links */
        padding: 6px 10px; /* Adjusted padding for links */
    }

    p, a, li {
        font-size: 12px; /* Ensure paragraph and link text is readable on mobile */
    }

    .enquire-now-button {
        bottom: 10px;
        right: 10px;
        font-size: 14px;
        padding: 8px 16px;
    }

    .enquire-now-button form {
        width: 50%; /* Adjust form width for smaller screens */
        left: 5%; /* Center the form */
        right: 5%;
    }

    .enquiry-form input[type="text"],
    .enquiry-form input[type="email"],
    .enquiry-form textarea {
        font-size: 12px; /* Adjust font size */
    }

    .enquiry-form input[type="submit"] {
        font-size: 12px; /* Adjust font size */
    }
}

/* Styles for tp-caption headings */
h1.tp-caption, h2.tp-caption {
    margin-top: 0 !important;
    font-size: 54px !important;
}

@media (max-width: 767px) {
    h1.tp-caption, h2.tp-caption {
        font-size: 30px !important;
    }

    .element.element_1673503462598.read_more {
        font-size: 16px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {
    h1.tp-caption, h2.tp-caption {
        font-size: 20px !important;
    }

    .element.element_1673503462598.read_more {
        font-size: 14px !important;
        padding: 6px 10px !important;
    }
}

/* Styles for enquire-now button */
.enquire-now-button {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #005177; /* Button background color */
    color: #ffffff; /* Button text color */
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.enquire-now-button form {
    display: none; /* Hide the form initially */
    position: absolute;
    top: -200px; /* Adjust position as needed */
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px; /* Reduce padding */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    width: 300px; /* Adjust width */
}

.enquire-now-button:hover form {
    display: block; /* Show the form when hovering over the button */
}

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form textarea {
    width: 100%;
    padding: 5px; /* Reduce padding */
    margin-bottom: 5px; /* Reduce margin */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px; /* Adjust font size */
}

.enquiry-form input[type="submit"] {
    background-color: #005177;
    color: #ffffff;
    padding: 5px 10px; /* Reduce padding */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px; /* Adjust font size */
}

.enquiry-form input[type="submit"]:hover {
    background-color: #003d58;
}

/* Styles for "View Band Profile" buttons */
.element.element_1673503462598.read_more {
    background-color: #101573; /* Same color as the header */
    color: #ffffff; /* White text color for contrast */
    border: none; /* Remove any default border */
    padding: 10px 20px; /* Add some padding for a nicer look */
    border-radius: 5px; /* Optional: Add rounded corners */
    text-decoration: none; /* Remove underline from links */
    display: inline-block; /* Ensure it behaves like a button */
    font-size: 16px; /* Adjust font size as needed */
    cursor: pointer; /* Pointer cursor to indicate clickable */
}

/* Add hover effect to the buttons */
.element.element_1673503462598.read_more:hover {
    background-color: #0d144f; /* Slightly darker shade on hover */
}

/* Ensure buttons are visible in mobile view */
@media (max-width: 767px) {
    .element.element_1673503462598.read_more {
        display: inline-block !important;
        width: 100%; /* Full width for better visibility */
        text-align: center;
    }
}

/* Hide the featured image */
.call_featured {
    display: none !important;
}

body .band-meta {
    display: none
}

.site-footer {
    background-color: #101573; /* Indigo color to match the header */
    color: #ffffff; /* Ensure text is white for contrast */
}

.site-footer a {
    color: #ffffff; /* Ensure footer links are also white */
    text-decoration: none; /* Remove underline from links */
}

.site-footer a:hover {
    color: #d3d3d3; /* Change link color on hover for better UX */
}

.previous-clients-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0;
}

.previous-clients-gallery img {
    max-width: 150px;
    margin: 10px;
    height: auto;
    flex: 1 1 150px;
}

@media (max-width: 767px) {
    .previous-clients-gallery img {
        max-width: 100px;
        flex: 1 1 100px;
    }
}

@media (max-width: 480px) {
    .previous-clients-gallery img {
        max-width: 80px;
        flex: 1 1 80px;
    }
}

/* Style the social media icons with original colors */
.icons a .fa-instagram {
    color: #E4405F; /* Instagram */
}

.icons a .fa-facebook-official {
    color: #3b5998; /* Facebook */
}

.icons a .fa-twitter-square {
    color: #1DA1F2; /* Twitter */
}

.icons a .fa-linkedin {
    color: #0077B5; /* LinkedIn */
}

.icons a .fa-youtube {
    color: #FF0000; /* YouTube */
}

/* Add hover effect to make it more attractive */
.icons a:hover .fa-instagram {
    color: #E1306C;
}

.icons a:hover .fa-facebook-official {
    color: #3b5998;
}

.icons a:hover .fa-twitter-square {
    color: #1DA1F2;
}

.icons a:hover .fa-linkedin {
    color: #0077B5;
}

.icons a:hover .fa-youtube {
    color: #FF0000;
}
 
Upvote 0 Downvote
Code: 
@media (max-width: 5000px) {

    #site-navigation > * {

        opacity: 0;
        transition: -webkit-opacity 750ms ease-out;
        transition: opacity 750ms ease-out;
        transition: opacity 750ms ease-out, -webkit-opacity 750ms ease-out;



    }

Set opacity to 1 and it will work.
Why do you use max-width: 5000px?
Also hamburger is overlapping with menu
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

DataCamp Advertisement
Code Academy Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom