Reformatting Navigational Links

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

Hello all,

I would appreciate any help on building custom css that would align my navigational links to the left of my navigational folder, which I've custom coded to be an image of a cross.  Currently, the navigational links ("Work" and "About") are situated far below the cross, but I would like for them to be directly to the left of the image or even bottom left of the image. Neither padding or left/right values have successfully moved the text. Below is a screenshot of the current header layout.

I'd also appreciate any advice on how to make the navigational links bolded when hovered over/clicked on. At the moment, they become bold when hovered over, but when the page is clicked on the link is underlined instead of bolded. Is there a way to bold the active link, remove the underline, all without disrupting the background image I've coded to produce the cross?

I will attach all of the code currently applied to my header text below. Thank you for your guidance!

a {
text-decoration: none !important;

}

header a {
text-decoration: none !important;
}

a {
background-image: none !important;
}

header a {
background-image: none !important;
}

header a:hover {
  font-weight: 900;
}

header a:active {
    font-weight: bold !important;
}

.header-nav-folder-content {background-color: transparent!important}

.header-announcement-bar-wrapper [href="/main-navigation"], .header-menu--folder-list .header-menu-nav-item [href="/main-navigation"]{
    background-image: url(https://www.freeiconspng.com/thumbs/cross-png/cross-png-28.png)!important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
   background-position: center center !important;
    color: transparent !important;
}

/* dropdown menu text size */
.header-nav-folder-content a {
    font-size: 18px;  
}

use this

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
  right: -10px !important;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
  top: 100px !important; }

It worked - thank you so much @AZIM2121 ! Do you have any advice on how to fix the bold on hover in navigation?

*I adjusted some of the values so the final code was:

.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content {
  right: -100px !important;
}

.header-nav .header-nav-item--folder .header-nav-folder-content {
  top: -9px !important; }

Try using this CSS to bold item on hover

/* bold item */
.header-nav-folder-item a:hover {
    font-weight: bold;
}

Can anyone help me?

The (green) backgrounds of my drop down menus need to be wider and lower so the text doesn't hit their borders.

Also my checkout button needs to be

-bigger.

-black with white writing.

-white with black writing when you hover on it.

I'd be so so so grateful for any help!

Thanks

On 10/11/2022 at 11:32 PM, Funjob said:

Can anyone help me?

The (green) backgrounds of my drop down menus need to be wider and lower so the text doesn't hit their borders.

 

Also my checkout button needs to be

-bigger.

-black with white writing.

-white with black writing when you hover on it.

 

I'd be so so so grateful for any help!

 

Thanks

Hi,

What is your site url? We can check easier

https://www.underhereyes.com/

On 10/23/2022 at 7:05 PM, Funjob said:

https://www.underhereyes.com/

Add to Design > Custom CSS

div.header-nav-folder-content div {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
div.header-nav-folder-content span {
    padding-left: 10px;
}
button.cart-checkout-button {
    background-color: black !important;
    color: white !important;
}
button.cart-checkout-button:hover {
    background-color: white !important;
    color: black !important;
    border-color: white !important;
}

Thanks!

The dropdown menus look great (although the padding doesn't work on the checkout page.)

Also, is there a way to make the checkout button bigger?... And the hover doesn't seem to be doing what I need it to...

On 10/31/2022 at 10:30 PM, Funjob said:

Thanks!

The dropdown menus look great (although the padding doesn't work on the checkout page.)

Also, is there a way to make the checkout button bigger?... And the hover doesn't seem to be doing what I need it to...

Add padding to this code

button.cart-checkout-button {
    background-color: #000 !important;
    color: #fff !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}