How to Replace Mobile Menu Icon with Page Links?

How can I replace the hamburger menu icon on the mobile version of my site with just links to the pages themselves, as if it was in the desktop version? I've attached images of my site as it is now and an example of how I'd like it to be (someone else's site).

Hi,
Please share your website URL.

Best,
Leopold

Hi Leopold, it's https://www.kofiperry.com/

Thanks

5 hours ago, IXStudio said:

Hi,
Please share your website URL.

Best,
Leopold

I used this code from @tuanphan

@media screen and (max-width:1024px) {
.header-nav {
    display: flex !important;
    justify-content: flex-end !important;
}
.header-burger {
    display: none !important;
}
.header-title {
    max-width: 40% !important;
}
a#site-title {
    white-space: nowrap;
}
}

Which worked well, but now I want the title and page links to both move to the left. What code can I add to do that?

On 9/22/2023 at 5:24 AM, KofiPerry said:

I used this code from @tuanphan

 

@media screen and (max-width:1024px) {
.header-nav {
    display: flex !important;
    justify-content: flex-end !important;
}
.header-burger {
    display: none !important;
}
.header-title {
    max-width: 40% !important;
}
a#site-title {
    white-space: nowrap;
}
}

 

Which worked well, but now I want the title and page links to both move to the left. What code can I add to do that?

Don't remove any code in your current code. Use this CSS code under

@media screen and (max-width: 767px) {
.header-display-mobile {
  display: block !important;
}
.header-title-nav-wrapper {
  flex-direction: row-reverse;
  justify-content: space-around;
}
.header .header-title-nav-wrapper .header-title {
  flex-basis: unset;
  flex: 3 1 !important;  
  margin: unset !important
    
}
.header-nav {
  flex: 1 1 !important;  
  margin-right: unset !important;
  text-align: left !important;
}
.header-layout-nav-right .header-nav-list {
  justify-content: flex-start;
  display: flex !important;
  flex-direction: column;
}
.header-nav-list>div {
margin: 0 !important}

.header-title-text {
  padding-right: 0 !important;
  text-align: right;
}}