How can I customise my header and add mouse-over effects?

Store Design

Topic summary

Goal: Center the header navigation and add a mouse-over effect; also adjust navigation text size on a Shopify store (URL provided for review).

What was done:

  • Mouse-over effect: Added CSS in Assets > base.css. Uses .header__menu-item with a :after pseudo-element to draw a green underline that animates from left to right on hover (transition .5s), and removes default text-decoration on hover.
  • Centering + font size: Added a media query (@media min-width: 990px) to set .header–middle-left to grid-template-columns: 1fr auto 1fr (centers the middle section) and set .header__menu-item font-size to 1.4rem.

Context/notes:

  • The requester suspected centering issues might be related to removing the search icon. The provided grid adjustment should center content regardless.
  • Technical terms: CSS pseudo-element (:after), media query (applies styles on screens ≥ 990px), grid-template-columns (controls header layout columns).

Status:

  • Hover effect confirmed as working by the requester.
  • Centering and font-size solution provided; awaiting confirmation of final alignment on the live theme.
Summarized with AI on January 19. AI used: gpt-5.
1

Hello, could someone please help me customising my header. Needing to move the navigation items to the center and add an effect when mouse it over. Reply if you can help!

Thanks!

2

Hi @Khaleed ,

Please send your site. I will check it.

3

thank you!!

URL: https://b8f5a5-3.myshopify.com/

And i was wondering if you would be capable of making an effect so when the mouse is over the navigation text, the selected on turns green from left to right??

Thanks!!!

4

Hi @Khaleed ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.header__menu-item {
	position: relative;
}
.header__menu-item:hover span {
	text-decoration: none;
}
.header__menu-item:after {
	content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 100%;
    margin: 0 15px;
    border-bottom: 2px solid;
    transition: right .5s;
	border-bottom-color: green;
}
.header__menu-item:hover:after {
	right: 0;
    opacity: .8;
}
5

Thank you! the effect looks very good! But the content is still not alligned in the middle. Could it be to do with me removing the search icon from there?

6

I also want to be able to adjust the size of the navigation text if possible :slightly_smiling_face:

7

Hi @Khaleed ,

Please add code:

@media screen and (min-width: 990px) {
  .header--middle-left {
    grid-template-columns: 1fr auto 1fr;
  }
  .header__menu-item {
    font-size: 1.4rem;
  }
}