Navigation menu in wrong colour after changing code (mobile)

Hi there,

I have a single page that I have been slowly editing to look different from the rest of the template on my website:

www.arthurlaidlaw.com/portfolio

The page background is white, unlike the rest of the site (where it's black). The template (Forte, 7.0) says that the navigation menu and logo should change colour according to whatever the background is, but in practice that doesn't happen. I've editing the background colour site wide or using collection IDs through the Custom CSS editor in the Design tab and in the page header, but with no success. Instead I had to upload an image and embed it within the individual page header, which seems to be working well.

In order to change colour of the navigation bar and logo, I used the following code:

 .logo a, .logo-subtitle, #topNav .main-nav li a, #topNav .folder .folder-child-wrapper .folder-child:before, #mobile-navigation a, .ctrl-button a {
    color: black;
}

This worked well, and I was nearly satisfied – the menu text across the top of the page is black and easily legible. It is also excluding to the /portfolio page, and doesn't affect any other pages. 

However, when I went to view the site on mobile, and clicked the menu hamburger, the frame is also black, meaning the dropdown text is invisible. Does anyone know what I can do to change this?

My second question is less essential, but would still be nice. I was wondering if it's possible to link the images on the page, so that when you click on one to view it in a Lightbox, you could simply click on the left/right of the page or use a left/right arrow key to navigate to the next image on the page?

Thanks in advance for you help

Okay, think I fixed the first part, by deleting the following from the header:

#mobile-navigation a

Although the hamburger still shows as black once clicked, unfortunately. Would be great to solve that.

The second question, though, remains a mystery.

Add to Design > Custom CSS

.sqs-mobile-nav-open a.icon-hamburger {
    color: white !important;
}

Thanks for this, I'll try it! 

Do you have any ideas how to do the second part – creating a kind of gallery from one Lightboxed image to the next?

Thanks again 🙂

On 1/8/2023 at 7:18 PM, tuanphan said:

Add to Design > Custom CSS

.sqs-mobile-nav-open a.icon-hamburger {
    color: white !important;
}

 

Unfortunately this doesn't work, it just makes the hamburger unclickable on mobile.