Navigation items moving

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

(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;
}

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

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;
}
}

thank you for your response, that worked! is there a way to make the hover effect of the logo like the other ones on mobile. So the hover effect shows as information and projects. 

https://www.loom.com/share/d6ededd96aea45a99f57245c4bccc135?sid=8a9da675-a9e8-4de5-9f43-2063fb3b78cf

Thanks a lot!

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?