Changing the navigation menu position in the header?

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!

To do this for a 7.1 site , edit the header,  little panel comes up on the right corner, choose desktop view, then click header layout, one of the choices is Logo/title over the nav bar. 

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.

That will take some code. 

Yes I was wondering if someone could point me towards the right direction. I have basic knowledge of HTML and CSS but not enough for that.

Is there another workaround possible? Drop down or something else?

I'm researching as we speak.

I found a code (CSS) but it moves the whole header. I just wanted to make the navigation links vertical. Any CSS expert?

Thank you for your help!

To give you guys an idea of what I'm trying to accomplish. I used a text block to replicate it but it's too spaced out from the site title (I'd like them closer) and I have to manually link them which creates issues.

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

It's an interesting idea. 

The only issue with that is that users will have to click the hamburger to reveal the menu. Might not work with less tech savvy people. I'll try though!

If you have any other options please let me know and once more I am grateful for your help!

Hamburger menu icon is almost standard with mobile view, and many here want it on all devices so it shouldn't be a problem for the majority of viewers to your site. 

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

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

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!

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

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.

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.