Jump to content

Changing the navigation menu position in the header?

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
  • Replies 15
  • Views 7.4k
  • Created
  • Last Reply

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.

Link to comment

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

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!

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

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

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

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

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

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

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.