• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Digital Pro: Menu and Header questions

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Digital Pro: Menu and Header questions

This topic is: resolved
  • This topic has 10 replies, 2 voices, and was last updated 2 years, 2 months ago by jskeris.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 18, 2021 at 7:58 pm #502708
    jskeris
    Participant

    Here's my website:
    http://www.ask-allow.com/

    How do I add social media icons to the top so it looks like the following:
    Name/Logo - Menu - Social Icons

    Also, how do I change the font color to white in the Header?
    "Ask Allow
    Brand Strategy and Customer Engagement"

    Thank you!
    Jodi

    January 19, 2021 at 2:28 pm #502719
    Anita
    Keymaster

    @jskeris I used Digitial Pro on my site and have the code. You just cannot see it there as I'm not utilizing the area at the moment. Here's my code. Add the CSS portion to the Additional CSS box and then add the functions content to the functions.php file.


    Love coffee, chocolate and my Bella!

    January 19, 2021 at 4:28 pm #502732
    jskeris
    Participant

    Thank you! I found the Additional CSS Box. I just found the functions.php file...do I put your code after the big chunk of code or before? Also, do I need to have a specific Social Widget installed?
    Thank you for your help!

    January 19, 2021 at 4:34 pm #502733
    Anita
    Keymaster

    If you go to Appearance > Theme Editor. Look on the right hand side and you'll see a list of file. The function.php file is listed there. Scroll all the way down to the bottom and add a couple spaces and then copy the contents from line 4 to the end into it and Save it.

    Use Genesis Simple Social Icons - https://wordpress.org/plugins/simple-social-icons/.


    Love coffee, chocolate and my Bella!

    January 19, 2021 at 4:48 pm #502734
    jskeris
    Participant

    Perfect! Thank you!
    Any chance you know where I can change the color of the font in the header?
    "Ask Allow
    Brand Strategy and Customer Engagement"

    That's gotta be in the CSS somewhere..right?

    January 19, 2021 at 5:04 pm #502735
    Anita
    Keymaster

    Add this to the Additional CSS box as well.

    #front-page-1, #front-page-1 h3 {
        color: #fff !important;
    }
    

    Love coffee, chocolate and my Bella!

    January 19, 2021 at 5:36 pm #502737
    jskeris
    Participant

    "You're a wizard 'arry!"
    Thank you so much!

    January 19, 2021 at 5:40 pm #502739
    Anita
    Keymaster

    You're welcome!


    Love coffee, chocolate and my Bella!

    January 19, 2021 at 8:07 pm #502742
    jskeris
    Participant

    I have another question! In the same vein...
    Could I, instead of the Headers/Copy in that area, could I put an image of my logo with my tagline instead? Or is that too much coding w/customization?
    Thank you!

    January 19, 2021 at 8:15 pm #502744
    Anita
    Keymaster

    There's two ways you can do it. The first, which I recommend as the option would be to create a logo with the tagline included in the image. This way when it's reduced down on mobile, you don't have letters from the tagline/site description that drop down and separate on different lines.

    The other option is to add your logo and then look around line 1379 of the stylesheet - remove lines 1379-1384 which contains this code.

    .site-description {
    	display: block;
    	height: 0;
    	margin-bottom: 0;
    	text-indent: -9999px;
    }

    Removing that will display the tagline or site description under the logo.


    Love coffee, chocolate and my Bella!

    January 19, 2021 at 9:39 pm #502746
    jskeris
    Participant

    Yeah. I'm definitely going to make the logo and tagline one image file. png is ideal, right? What size (pixels)/dpi should I make it? How would I alter the code?
    Thank you so much for this detailed info!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble