Jump to content

Reformatting Navigational Links

Recommended Posts

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

Screen Shot 2022-07-22 at 9.23.22 PM.png

Link to comment

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

 

 

Link to comment
  • 2 months later...

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

Screenshot 2022-10-11 at 17.25.45.png

Link to comment
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

Screenshot 2022-10-11 at 17.25.45.png

Hi,

What is your site url? We can check easier

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
  • 2 weeks later...
On 10/23/2022 at 7:05 PM, Funjob said:

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

 

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

 

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.