Rachelbuccalo Posted July 23, 2022 Share Posted July 23, 2022 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; } Link to comment
AZIM2121 Posted July 23, 2022 Share Posted July 23, 2022 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; } tuanphan 1 Link to comment
Rachelbuccalo Posted July 23, 2022 Author Share Posted July 23, 2022 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
tuanphan Posted July 26, 2022 Share Posted July 26, 2022 Try using this CSS to bold item on hover /* bold item */ .header-nav-folder-item a:hover { font-weight: bold; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Funjob Posted October 11, 2022 Share Posted October 11, 2022 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 Link to comment
tuanphan Posted October 15, 2022 Share Posted October 15, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Funjob Posted October 23, 2022 Share Posted October 23, 2022 https://www.underhereyes.com/ Link to comment
tuanphan Posted October 27, 2022 Share Posted October 27, 2022 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Funjob Posted October 31, 2022 Share Posted October 31, 2022 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... Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment