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

[DavidW81]

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. 

[theycallmemakka]

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

[Made4uo-Ribe]

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:

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

[DavidW81]

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]

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!

[DavidW81]

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]

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 · 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:

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

[DavidW81]

Worked! Thank you so much!