Jump to content

Navigation items moving

Recommended Posts

  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

(1) First, with logo, change this code

<style>
            div.header-title-logo a {
                content: url("https://static1.squarespace.com/static/64ef18e3bef2d57976055fe8/t/64fb4cce0d215d20db5b0e27/1694190799360/DXC_LOGO_2023+%282%29+copy.png") !important;
                max-width: 300px;
            }
        </style>

to this

div.header-title-logo a img {
    content: url(https://static1.squarespace.com/static/64ef18e…/t/64fb4cc…/1694190799360/DXC_LOGO_2023+%282%29+copy.png) !important;
    max-width: 300px;
}

and change this

.header-title-logo a:hover {
    color: #fff !important;
    background: #ff460d;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

to this

.header-title-logo a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.header-title-logo a:hover {
    color: #fff !important;
    background: #ff460d;
}

(2) With Navigation Projects - Information

Change this code

.header-nav-item a:hover {
    color: #fff !important;
    background: #ff460d;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

to this

.header-nav-item a {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.header-nav-item a:hover {
    color: #fff !important;
    background: #ff460d;
}

 

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

Thank you so much! that worked. I wanted to ask you two quick things more. 

1- I need information and projects tabs to be a bit closer to the logo instead of so far. I send a video where it shows in red where the tabs should be :https://www.loom.com/share/4b7af768883f48b59ad92e8215907d3f?sid=42ee2a15-d442-45ca-b01e-e8b4af03f3e4 

2 - and in mobile version I need the titles to be on the same line and not on top of each other. I send a video 

https://www.loom.com/share/b2667883272d449f9587341fc4161209?sid=7a9ac427-08e7-46ec-8d1a-44834e5bb66a 

Thanks a lot!! 

Link to comment
On 9/17/2023 at 6:34 PM, Barbi said:

Thank you so much! that worked. I wanted to ask you two quick things more. 

1- I need information and projects tabs to be a bit closer to the logo instead of so far. I send a video where it shows in red where the tabs should be :https://www.loom.com/share/4b7af768883f48b59ad92e8215907d3f?sid=42ee2a15-d442-45ca-b01e-e8b4af03f3e4 

2 - and in mobile version I need the titles to be on the same line and not on top of each other. I send a video 

https://www.loom.com/share/b2667883272d449f9587341fc4161209?sid=7a9ac427-08e7-46ec-8d1a-44834e5bb66a 

Thanks a lot!! 

#1. Use this CSS code

/* space between nav items - logo */
@media screen and (min-width:768px) {
div.header-nav-item:nth-child(1) {
    position: relative;
    right: -5vw;
}
div.header-nav-item:nth-child(2) {
    position: relative;
    left: -5vw;
}}

#2. Use this CSS code

/* Mobile header */
@media screen and (max-width:767px) {
.header-display-desktop .header-title-nav-wrapper .header-nav .header-nav-list {
    justify-content: space-between !important;
    margin-left: 1vw;
    margin-right: 1vw;
    width: calc(~"100% - 2vw") !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
On 9/14/2023 at 6:15 PM, Barbi said:

Hi, 

I would like the navigation items to stay in the same place when I hover instead of moving, is that possible? 

I send a video: https://www.loom.com/share/2aa83fd4833349ca87434f6557846300?sid=413d005e-0210-4e6f-98ce-3d1d00fbf68e

The website: https://rose-seabass-btxr.squarespace.com/

password: 1234 

 

Thanks a lot! 

Barbara

The site is private now. Can you check it again?

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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