Jump to content

Flatiron header issue

Recommended Posts

On the header of the Flatiron template there seems to be a spacer block on the right side. This causes my navigation buttons to stack one on top of the other on lower resolution screens. I would prefer that they stretch across the top for a little cleaner look. There is no way to just remove this block within the template settings so I am assuming that is embedded into the css for the template and I would like to modify the css on my site to resolve these issues. However, I would also like the mobile version to remain stacked for the navigation buttons. Is there anyone that can assist with this? I am not familiar enough with css to make these modifications myself. 

Also I have attached pictures to show what I am referring to. The first is my 4k monitor(this is how I would like the navigation buttons to look on all computer screens), the second is on my macbook pro where the third navigation button starts to stack(I do not want this on any computer screen, I want it stretching across the top as one line), the third is on a mobile screen and I want this to stay the same and ideally be the same on ipad and tablets as well(so far no issues with this).

Thank you!

4k screen.jpg

macbook pro screen.jpg

mobile version.jpg

Link to comment
  • Replies 4
  • Created
  • Last Reply
4 hours ago, JLeonStudios said:

www.jleonstudios.photo

Also thank you for that link but it did not have what I was looking for specifically. At least not that I was able to find.

Add to Home > Design > Custom CSS (Logo is 35%)

ul#nav {
    float: none !important;
    max-width: 65% !important;
}

 

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.