Solved

Dawn Theme - Remove Menu Underlines and fix multi-row image heights

DavidW81
Tourist
6 0 3

Hello All. I've tried searching the forums and got part of the way to a solution, and have tried a few other fixes I found here, but have yet to be able to find a solution that works for my site so I'm hoping someone here can help me. I've included the site information and password below.

 

  1. The first issue I'm trying to solve is this- I'm in the process of setting up a site using the Dawn theme, and have used information from this post to make the header menu options clickable links. That is working great, however they are now underlined like normal hyperlinks and I want to remove the underline. I've tried editing the base.css as outlined in these two posts- post 1, post 2. I have also used the information in those posts to try and search for other header menu options and change the decoration to none and that hasn't worked either. I would love if someone could point me in the right direction for which option to change to remove those underlines in the menu. 
  2. The second issue I'm facing is with my 'about' page. I have already tried setting image height to 'small' and desktop image width to 'small.' It's a multi-row object and I like the narrow image width, but as I put in more text the image height grows with the text, so the entire image starts to appear cropped. How can I lock image size so I can add more text without the image size changing? 

 

site: mesynthesis.com

p/w: leushe

 

Thanks much for any help you can provide. 

 

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5457 1314 1614

This is an accepted solution.

Hi, Sorry this post got hide on another notification. Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
nav.header__inline-menu a {
    text-decoration: none;
}
.header__menu-item span, .header__menu-item a {
  transition: text-decoration var(--duration-short) ease;
}
.header__menu-item:hover span, .header__menu-item:hover a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
details[open] > nav.header__inline-menu {
  text-decoration: underline;
}
details[open]:hover > nav.header__inline-menu {
  text-decoration-thickness: 0.2rem;
}
</style>

 

And Save. 

Result:

Made4uoRibe_0-1712600593395.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 8 (8)

theycallmemakka
Shopify Partner
1359 302 333

Hi @DavidW81 ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
header-menu a {
    text-decoration: none!important;
}
.image-with-text__media img {
    max-height: 500px!important;
    object-fit: contain!important;
}


</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Made4uo-Ribe
Shopify Partner
5457 1314 1614

Hi @DavidW81 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

 

nav.header__inline-menu a {
    text-decoration: none !important;
}
@media screen and (min-width: 750px){
.image-with-text__media img {
    object-fit: contain;
}
}

 

And Save. 

Result:

Made4uoRibe_0-1711562686675.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


DavidW81
Tourist
6 0 3

Thank you all! Everyone's solutions helped out with the underlining of links in the menu bar and the last solution from Made4uo-Ribe also helped out to ensure the multi-row images stay a consistent size.

 

I tried all three solutions for removing the underlining, and all removed the underlining but also produced an unintended side effect. Teh "About" link has the default behavior, and the drop down menu options are no longer underlined, but now they are never underlined so the behavior of the "About" link and all the other links isn't uniform.

 

The "About" link has the behavior of a default menu item, where it is not underlined normally if just looking at the page. But if you hover over 'About' it then becomes underlined. Then if you click on it and you're on that particular page it remains underlined. Is there a simple way to make all of the links behave that way so everything 'feels' the same when navigating the website?

Made4uo-Ribe
Shopify Partner
5457 1314 1614

Hi,

As you said in the post you just like to remove the underlines in the menu. You didnt mention to fully remove when the pages is active, hover or so on. I like to ask it before I give the solution but I leave it that way cause that is only you requested.  Please, be more specify what do you like to remove. 

Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


DavidW81
Tourist
6 0 3

Understood. I'm sorry for not being more clear. I'll try to clarify as best I can here.

 

  • Currently: I have followed a post (previously linked) to make the header dropdown menu text a link to a page, and then the arrow opens up the menu. They have hyper-link underlines continuously. The About menu has the behavior where it is not underlined, but if you hover over "About" then it becomes underlined while the mouse pointer hovers over it. And if you clink on the "about" link it remains underlined when you are on that page. Which makes the behavior of the About and Dropdown menus different.
  • Desired End State:  I would like all header menu options to act the same so they have a unified experience. Ideally all options would act exactly as the 'About' page. E.G.-
    • When page is loaded to the home page, the mouse cursor is not hovering over any menu options, and none of menu pages are loaded- There is no underlining for the menu links.
    • When the mouser cursor hovers over any of the menu items, that item is underlined as a hyperlink.
    • When one of those pages is selected, like when I am on the 'About' page, the page that is selected is underlined to show that is the page you're on.

 

Thanks much, and again I'm sorry for the previous confusion. 

DavidW81
Tourist
6 0 3

Hello again. I just wanted to follow up and see if there might be an update on how I could accomplish this? Thanks much. 

Made4uo-Ribe
Shopify Partner
5457 1314 1614

This is an accepted solution.

Hi, Sorry this post got hide on another notification. Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
nav.header__inline-menu a {
    text-decoration: none;
}
.header__menu-item span, .header__menu-item a {
  transition: text-decoration var(--duration-short) ease;
}
.header__menu-item:hover span, .header__menu-item:hover a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
details[open] > nav.header__inline-menu {
  text-decoration: underline;
}
details[open]:hover > nav.header__inline-menu {
  text-decoration-thickness: 0.2rem;
}
</style>

 

And Save. 

Result:

Made4uoRibe_0-1712600593395.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


DavidW81
Tourist
6 0 3

Worked! Thank you so much!