Jump to content

Header / More space navigation 7.1

Recommended Posts

Site URL: https://www.ronaldaartsen.com

As many might have noticed, the header incl. navigation layout is a bit more restricted than in 7.0.

@tuanphan , would it be possible to use css to make a custom header so I can create more space for navigation (-items). In the current structure it is so narrow that if I add one more page it shows the navigation menu on 2 lines. 

An example of how I would like it to look is in the screenshot. So basically, the navigation and in this case the button in a different block / on a seperate line from the logo/title and soc media icons. Like we had in 7.0 Top & bottom.

Thanks in advance for having a look at this.

96F6F151-C5F1-49F1-B48B-F25DEF3D352B.jpeg

Link to comment
  • Replies 4
  • Views 843
  • Created
  • Last Reply

My idea is

W1.

  • remove button, use CSS to turn last item in navigation to button
  • Use CSS to adjust header layout a bit

image.thumb.png.bac9f0778f0b8e934bfc1ee36f998eea.png

W2. Remove Logo, Social Icons

  • Add Logo - Social Icons to Footer
  • Use jQuery to move Logo, Social Icons to Header

W3. Remove Header Navigation, Button

  • Add Navigation, Button to Footer
  • Use jQuery to move Nav, Button to Header

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
12 minutes ago, tuanphan said:

My idea is

W1.

  • remove button, use CSS to turn last item in navigation to button
  • Use CSS to adjust header layout a bit

image.thumb.png.bac9f0778f0b8e934bfc1ee36f998eea.png

W2. Remove Logo, Social Icons

  • Add Logo - Social Icons to Footer
  • Use jQuery to move Logo, Social Icons to Header

W3. Remove Header Navigation, Button

  • Add Navigation, Button to Footer
  • Use jQuery to move Nav, Button to Header

Thank you Tuanphan. I have no css or jquery knowledge but I will look around and see if I can find anything on the steps you suggested.

 

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.