Jump to content

Is it possible to make the course navigation menu always visible?

Go to solution Solved by Web_Solutions,

Recommended Posts

Hello!
I started working on creating a course, and I had a question.
Is it possible to make the course navigation menu always visible, so that it does not overlap the design, video, but is just on the side all the time?
Is there any code for this?
I will be grateful for any hint or help!
image.thumb.png.e254bb44d0084a7437b47bccb332ba0b.png

Edited by the_first_wolf
add image
Link to comment
11 minutes ago, the_first_wolf said:

Hello!
I started working on creating a course, and I had a question.
Is it possible to make the course navigation menu always visible, so that it does not overlap the design, video, but is just on the side all the time?
Is there any code for this?
I will be grateful for any hint or help!
image.thumb.png.e254bb44d0084a7437b47bccb332ba0b.png

Hi @the_first_wolf

Can you provide the site URL (+ password if it is not live) to allow the community to assist you.

L

Link to comment
  • Solution
21 hours ago, the_first_wolf said:

Thank you for responding!
Here is the address
No password, just started work.

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS. Let me know if it works.

@media only screen and (min-width: 768px) {
    .course-item {
        .course-item__side-nav-toggle-button {
            display: none !important;
        }
        .course-item__side-nav {
            position: fixed !important;
            transform: none !important;
        }
        .course-item__side-nav-content {
            opacity: 1 !important;
        }
        .course-item__content {
            flex: 0 0 calc(~"100% - 400px") !important;
            margin-left: 400px !important;
        }
    }
    #collection-item-sections {
        width: calc(~"100% - 400px") !important;
        margin-left: 400px !important;
    }
    #footer-sections {
        z-index: 9999999999999 !important;
    }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
37 minutes ago, Web_Solutions said:

Add these code on Custom CSS panel in Website Utilities Website Tools > Custom CSS. Let me know if it works.

@media only screen and (min-width: 768px) {
    .course-item {
        .course-item__side-nav-toggle-button {
            display: none !important;
        }
        .course-item__side-nav {
            position: fixed !important;
            transform: none !important;
        }
        .course-item__side-nav-content {
            opacity: 1 !important;
        }
        .course-item__content {
            flex: 0 0 calc(~"100% - 400px") !important;
            margin-left: 400px !important;
        }
    }
    #collection-item-sections {
        width: calc(~"100% - 400px") !important;
        margin-left: 400px !important;
    }
    #footer-sections {
        z-index: 9999999999999 !important;
    }
}

 

Yes, it worked!
Thank you very much for your help!

Link to comment
  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.