Adding a space between logo and search icon

Shopify Discussion

Topic summary

A user seeks to add spacing between their logo and search icon in mobile view on their Dawn 7.0.1 theme.

Solutions Provided:

Multiple respondents offered CSS-based fixes:

  • Add margin-left to .modal__toggle-open (27px suggested)
  • Apply padding-left to header icon elements (20px suggested)
  • Insert CSS code before </head> in theme.liquid file

The original poster confirmed one solution worked.

Follow-up Issue:

A secondary problem emerged: a shadow appears on the homepage when toggling the mobile menu.

Resolution:

The user resolved the shadow issue independently by deleting or commenting out a specific CSS rule in base.css related to .header__icon--menu[aria-expanded="true"]::before, specifically the height calculation using viewport height and header position variables.

Note: The conversation text appears reversed/mirrored in the original input but has been interpreted correctly.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

@LitCommerce I want to add some space between my logo and the search icon in mobile view. I’m using Dawn 7.0.1 theme.

Website : https://www.eshoop101.com

Thank you

2

@eShoop101 Go to assetes/base.css and paste below css at bottom of file.

.modal__toggle-open
{

margin-left: 27px !important;

}
1 Like
3

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your base.css theme file
  3. Paste the code in bottom of file

summary.header__icon.header__icon–search.header__icon–summary.link.focus-inset.modal__toggle {
padding-left: 20px;
}

4

Hello @eShoop101 ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1673849090774.png
GemPages_0-1673849090774.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

2 Likes
5

Thank that works for me

6

Thanks that help. I have another issue I can see that when I press the toggle menu in mobile there is shadow which stay in the home page how to get rid of that.

7

@eShoop101
Put below css into base.css file(Online store->themes->Edit code->Assets->base.css)

@media (max-width:481px) 
{
.header {
  gap: 10px !important;
}
}
8

I have found the solution delete or comment

/*height: calc(var(–viewport-height, 100vh) - (var(–header-bottom-position, 100%))); */

.header__icon–menu[aria-expanded=“true”]::before {
content: “”;
top: 100%;
left: 0;
/*height: calc(var(–viewport-height, 100vh) - (var(–header-bottom-position, 100%))); */
width: 100%;
display: block;
position: absolute;
background: rgba(var(–color-foreground), 0.5);
}