Jump to content

Changing the navigation menu position in the header?

Go to solution Solved by derricksrandomviews,

Recommended Posts

Site URL: https://guava-dodecahedron-wgrn.squarespace.com/

Greetings community!

I am currently in the process of creating my author website and I am facing a small obstacle here.

I provided the temporary URL since thesoaresprotocol.com is still populating. 

I am looking to have the navigation menu underneath my name, an option not available with the header predetermined layouts. 

I tried to insert a text block with links below but it's not elegant and it would have the visitor scroll down further to reach the sections. 

Is there a coding solution or other to move these five links underneath my name (the site title).

Thank you for your help!

Link to comment

Hey Derrick!

Thank you for your timely answer! So I tried that but it also moves the site title to the center.

I would like to keep the site title to the left but have the navigation menu stacked underneath (in a list layout) to give more breathing room to my social media buttons and donation button on the right.

Thank you again.

Edited by A1Protocol
Link to comment
  • Solution

This code will put a hamburger up in the right hand corner, when opened the menu will be vertical. 

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right
  */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
  }
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
  /* Center logo in mobile device */
  .header-title {
    text-align: left !important;
  }
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  }
}

Link to comment
On 4/6/2021 at 12:03 AM, A1Protocol said:

Yes thank you! I tweaked it and it looks great!

Just want to say this page on tablet odessn't look good.

https://guava-dodecahedron-wgrn.squarespace.com/home/whoami

You can add this to Design > Custom CSS to solve it

/* whoami tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-6f709fdd53750ca45683 {
    padding-left: 0;
    padding-right: 0;
}
}

image.thumb.png.47e38cf43ee230de7d0b1e1a76be600f.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, A1Protocol said:

Thank you my good sir! Is there anything else that could be improved? I struggle with the mobile views.

I also posted in another thread in regard to my homepage. Thank you again!

Can you list all problems? We will check

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/10/2021 at 9:20 PM, A1Protocol said:

Yes thank you. Homepage between my main menu and the sections on the top and bottom and my contact page between my contact section and my quote from Ken Blanchard right below.

What do you mean? I don't quite understand.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.