How to Make Social Media Icons and Hamburger Menu in Header Larger?

  • Unknown's avatar
    spoiledjane · Member ·

    please help! i don’t know how to make these bigger, they are so tiny right now. i do not know how to code in CSS and i’m barely getting by creating this site, it’s been rough to say the least. where do i even put the code? i found a similar question in a previous forum post but the code they answered with didn’t work for me. i appreciate any and all help!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mysteriouslysweet4582422333 · Member ·

    To make social media icons and the hamburger menu larger in the header, you can adjust the CSS for both elements:

    1. For social media icons, use:
       .social-icons {
       font-size: 24px; /* Adjust size */
   }
    1. For the hamburger menu, use:
       .hamburger-menu {
       font-size: 30px; /* Adjust size */
   }

    Modify the pixel values to your preference and ensure both classes are correctly targeting the elements in your theme or site structure.

  • staff-seneca · Staff ·

    Hello there,

    It sounds like you’re having trouble adjusting the size of your social media icons and the hamburger menu on your WordPress.com site. I’d be happy to guide you through the process!

    While many changes can be made using the settings in the WordPress editor, you may prefer to customize your site using CSS, especially if you’re comfortable writing CSS code. WordPress.com includes a CSS editor that allows you to add custom styles to override your theme’s default settings. This feature is available on Premium, Business, Commerce, and the legacy Pro plans. If your site is on the Free or Personal plan, upgrading will give you access to these customization options.

    The method to access the CSS editor will depend on your theme. For themes supporting the site editor, navigate to Appearance > Editor, then click on Styles to find the Additional CSS section. For themes that do not use the site editor, including classic and third-party themes, CSS can be added via Appearance > Customize > Additional CSS. You can paste your CSS and preview the changes from there before saving.

    If you’re unfamiliar with CSS or don’t want to dive into coding, there are other ways to achieve your goals. You might consider switching to a block theme, which offers more flexible design options without needing to write any code. Alternatively, you could work with a developer if you need in-depth changes or further assistance. WordPress.com partners with Codeable, where you can hire experts to assist with custom coding and design.

    If you’d like more information on how to use CSS, this guide from MDN is a great resource. Should you decide to upgrade to a Premium plan, you’ll unlock additional design tools, more storage for media, and the ability to monetize your site.

    Feel free to reach out if you need further assistance or have any questions!

  • The topic ‘How to Make Social Media Icons and Hamburger Menu in Header Larger?’ is closed to new replies.