Jump to content

How to Replace Mobile Menu Icon with Page Links?

Recommended Posts

  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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?

IMG_1498.PNG

Link to comment
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?

IMG_1498.PNG

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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.