Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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
Posted (edited)

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

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.

Link to comment

image.png.1e5513a5e49dbbd98ad25bc66c3b086a.png

 

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.

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
Posted (edited)

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!

Edited by A1Protocol
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.

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.

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.

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