Force button on mobile header

Site URL: https://www.valkyriegym.com/

Hi there, code rookie here. Could really use a hand with this one!

I have a Custom CSS in use on my site to force the mobile menu all the time.
I think this is it:

Quote

.header-nav, .header-actions {

  display: none;

}

.header-burger {

  display: flex;

}

.header--menu-open .header-menu {

visibility: visible;

  opacity: 1;

}
a {
text-decoration: none !important;
}

I'm trying to add a button in the gap between the logo and the menu button that says 'Get Started'. I want it so that it is always present on the header; desktop or mobile view.

I've read other forum posts and tried to use the code, but it doesn't work, i assume becasue of the other code I'm using.

Website: https://www.valkyriegym.com/
Link for button: https://www.valkyriegym.com/starthere

Screenshot of how i want it to look below.

THANK YOU <3

You can use this code to Custom CSS box

/* Show button next to burger on mobile */
@media screen and (max-width:991px) {
  .header-actions.header-actions--right, .header-actions-action.header-actions-action--cta {
    display: flex !important;
}
.header-title-nav-wrapper {
    flex: 1 0 30% !important;
}
a.btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
}
}

On 9/18/2024 at 11:30 PM, tuanphan said:

You can use this code to Custom CSS box

/* Show button next to burger on mobile */
@media screen and (max-width:991px) {
  .header-actions.header-actions--right, .header-actions-action.header-actions-action--cta {
    display: flex !important;
}
.header-title-nav-wrapper {
    flex: 1 0 30% !important;
}
a.btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 14px !important;
}
}

 

Thanks so much @tuanphan, this is perfect on mobile view!

Can you possibly tweak it to work the same on desktop view too please?
Thanks ◡̈

On 9/23/2024 at 6:11 AM, Samfromvalkyrie said:

Thanks so much @tuanphan, this is perfect on mobile view!

Can you possibly tweak it to work the same on desktop view too please?
Thanks ◡̈

You mean force burger + button on desktop? You can change 991px to 3000px

On 9/24/2024 at 7:31 PM, tuanphan said:

You mean force burger + button on desktop? You can change 991px to 3000px

hey Yes that's more like it, thank you.
There's a mystery button appearing at the bottom of the mobile menu now though, it seems to be a replication of the button from the top bar (see black button in screenshot)
Any way to get rid of it?

Thanks for your help

On 9/26/2024 at 9:52 AM, Samfromvalkyrie said:

hey Yes that's more like it, thank you.
There's a mystery button appearing at the bottom of the mobile menu now though, it seems to be a replication of the button from the top bar (see black button in screenshot)
Any way to get rid of it?

Thanks for your help

You can use this to Website Tools > Custom CSS

.header-menu-nav-wrapper a.btn {
	display: none !important;
}