Unable to stop .gh-head-menu from becoming invisible/transparent on mobile

Themes
1

Hey there; as you can probably tell from my post, I’m brand new and hideously bad at CSS, and this is probably something I’m missing.

On the Solo theme, I’m attempting to do away with the burger menu on mobile. I only have one other link in my head and I hate mobile drop down (?) menus. I thought it’d be as simple as setting .gh-burger to display: none with code injection or just in screen.css. But I can’t manage figure out a way to override .gh-head-menu so that the anchor elements aren’t set to visibility: invisible on mobile. They’re still there and clickable, and I can still hover over them, so I don’t think it’s that they’re going in other weird places. I’ve tried abusing !important, I’ve tried code injection. I can’t figure it out. Here’s my hacky attempt with code injection.

`/* NO BURGER ON MOBILE */

@media (max-width: 767px) {

/* hide burger */
.gh-burger {display: none !important;}

/* keep visible */
#gh-head .gh-head-actions {
    position: static;
    visibility: visible;
    opacity: 1;
    flex-direction: row;
    justify-content: flex-end;
}

#gh-head .gh-head-menu {
  visibility: visible !important;
  opacity: 1 !important;
}

/* keep normal styling */
#gh-head :is(.gh-head-btn, .gh-head-link) {
    opacity: 1;
    transform: translateY(0);
}

.gh-search {
  display:none; 
}

/* adjust grid */
#gh-head .gh-head-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    gap: var(--head-nav-gap);
}

#gh-head .gh-head-brand {
    grid-template-columns: auto;
}

#gh-head .gh-head-btn {
font-size: 1.3rem !important;

}

}

Any guidance would be appreciated. I’m assuming the only way is to edit header.css, but I’d really rather not (since I don’t know how, and can’t find it under partials). Thanks so much in advance.

2

What’s the link to your site?

3

Found out the answer: #gh-head .nav li was setting everything to opacity: 0. I didn’t due my due diligence in looking at all the rules.

2 Likes