Hi,
I managed to place everything I needed in my navigation and also set all the hovering effects.
My issue is now whenever I hover over the items, it seems that they are moving slightly.
Is there something I can do about that?
And since my site has not been published yet, I don't have any links to share. But here is a screen recording of my site.
Hope that will help to understand what I mean.
By the way, here are all the codes I used for that:
//––– Nav-Menu
body:not(.header--menu-open) .header-nav-item--active>a {
background-image: none !important;
}
.header-nav-item--active a{
font-weight:400 !important;
}
.header-nav a:hover{
font-weight:400 !important;
}
//––– Social Media
//–––––––––––––––––––––––––––//
.header-actions-action--social {
// position:fixed;
//right:3vw;
//top:1.75vw;
scale:90%;
}
.header-actions--right .header-actions-action--social .icon:not(:first-child) {
margin-left: 2.5vw;
margin-right: 2vw;
}
//––– CTA - Button
.header-actions .btn {
//top:1vw;
// height:2vw;
// margin:1vw 0 1vw 1vw!important;
// border: solid red 1px!important;
}
.header-actions .btn:hover {
background-color: white;
color:#111111;
font-weight:bold !important;
box-shadow: inset 0 0 0 2px #111111;
}
Screenshot 2023-12-08 um 11.46.13 AM.mp4
Nima changed their profile photo
Nima reacted to a post in a topic:
How can I target and edit the button element in the header with CSS?
