How can I enlarge menu text and remove header social links?

Store Design

Topic summary

A user seeks to increase menu text size and remove social media links from their Shopify store header. A screenshot shows the current header layout.

Solutions Provided:

  • Menu text enlargement: Add CSS code targeting .header__inline-menu .header__menu-item with font-size: 14.5px (avoiding !important). The original code used .list-menu__item with font-size: 11.5px !important, but moving styling to CSS files was recommended.

  • Remove social links: Hide social icons by adding ul.header__social.list.social-list { display: none; } to the CSS file.

  • Center logo: Initially problematic, but resolved by adding media query CSS to base.css (not theme.liquid) targeting h1.header__heading with absolute positioning and transform properties.

Current Status:

The user successfully implemented menu text and social link changes. Logo centering worked after placing code in the correct CSS file, though the user notes the logo only appears centered on the main page. The support person requests clarification on where the logo centering code was added to troubleshoot the page-specific issue.

Key lesson: CSS modifications should be added to stylesheet files rather than theme.liquid for proper implementation.

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

Screenshot 2024-03-15 at 10.44.31.png
Screenshot 2024-03-15 at 10.44.31.png1598×178 19.3 KB

Is it possible to get the menu text bigger? and remove the social links in the header?
Website url: https://guldklippet-se.myshopify.com/

Thanks in advance!

2

Hello @zimey

It seems you have added custom styling to the theme.liquid.
You can increase the font size in the your code in the below property.

.list-menu__item {
    font-size: 11.5px !important;
}

However it’s better if you can move the styling to your styling/CSS files.

If you want to update only Header menu font size. try using the below code to your CSS file and comment the above piece of code.

.header__inline-menu .header__menu-item {
    font-size: 14.5px;
}

It is recommended not to use important.

JasmeetVT14313_0-1710496625569.png
JasmeetVT14313_0-1710496625569.png1655×1747 332 KB

To hide the social icons, try adding below styling.

ul.header__social.list.list-social {
    display: none;
}

Please hit Like and mark as a solution if it helps

3

Thank you it worked!!
Could you help me centering the logo aswell?
Thanks in advance.

4

@zimey
Try adding below code

@media screen and (min-width:1200px){
h1.header__heading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 25px;
}
}

Please hit Like to the solutions you find helpful.

5

This code dosent move my logo :disappointed_face: should i paste it in theme.liquid?

6

Can you retry the above code now, I have updated the code.

Please hit Like to the solutions you find helpful.

7

Screenshot 2024-03-15 at 12.57.26.png
Screenshot 2024-03-15 at 12.57.26.png1847×1271 377 KB

Here, in theme.liquid

8

@zimey
Can you retry the above code now, The code has been updated.
Please hit Like to the solutions you find helpful.

9

unfortunately its seems to not working:(

10

@zimey
You have added it at wrong place. Please add it to a CSS file

JasmeetVT14313_0-1710505550474.png
JasmeetVT14313_0-1710505550474.png1655×1747 688 KB

11

Thank you!!! now it worked :grinning_face_with_smiling_eyes:

12

Glad it helped!
Please hit Like to the solutions you found were helpful.

13

It helped but seems like the logo is only centered on the main page :face_with_tongue:

14

Certainly! Here’s a shorter version:

To increase the menu text size and remove social links from the header:

  1. Go to your Shopify admin dashboard.

  2. Navigate to Online Store > Themes > Edit code.

  3. In “theme.scss.liquid” or “theme.css”, add this CSS to increase menu text size:
    .site-nav__link {
    font-size: 16px; /* Adjust size as needed */
    }

  4. To remove social links, find and delete/comment out the code related to <ul class="social-links">.

  5. Save your changes.

Refresh your website to see the updates.

If you need further assistance, feel free to ask!

15

@zimey
Can you let me know where did you add it?