Lifestyle Pro Header Layout with header widget

Community Forums Forums Design Tips and Tricks Lifestyle Pro Header Layout with header widget

This topic is: resolved

This topic contains 17 replies, has 3 voices, and was last updated by  mfd 2 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #112122

    mfd
    Participant
    Post count: 22

    Using the Lifestyle Pro theme, I am currently working on the header on this site.

    I have made it so the header fills the entire page area. I would like to had social media icons to the upper right hand corner of the header area using the header widget.

    In the old Lifestyle theme, before it was mobile, I could lay the icons on top of the header area using position. I have found that I can this in the mobile version because it messes up the look in mobile view.

    Is there a way to be able to place the icons in the header area on this particular site?

    • This topic was modified 2 months, 3 weeks ago by  mfd.
    • This topic was modified 2 months, 3 weeks ago by  mfd.
    http://momstogetherblog.com/
    #112154

    AC
    Blocked
    Post count: 7712

    Can you turn the site on so we can take a look?

    #112156

    mfd
    Participant
    Post count: 22

    Sorry…forgot about that! It’s live nowl

    #112159

    AC
    Blocked
    Post count: 7712

    Have you tried using the Header Right Widget area to add the icons?

    #112160

    AC
    Blocked
    Post count: 7712

    Can you put it in place on the site?

    #112163

    mfd
    Participant
    Post count: 22

    I just popped the icons back in the widget in the header…I didn’t readjust the width of the header or make it transparent so you can see the full header image behind. But you should get the idea. Thanks for your help!

    #112164

    Tonya
    Member
    Post count: 170

    What I typically do for these is modify the following with the functions.php file:

    //* Add support for custom header
    add_theme_support( 'custom-header', array(
    	'width'           => 1090,
    	'height'          => 70,
    	'header-selector' => '.site-header',
    	'header-text'     => false,
    ));

    What this does is to attach the header image to the <header> element vs the logo area.

    You’ll want to return the .site-title and .site-title a styling back to what it was previously though.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    • This reply was modified 2 months, 3 weeks ago by  Tonya.
    • This reply was modified 2 months, 3 weeks ago by  Tonya.
    #112169

    mfd
    Participant
    Post count: 22

    Tonya-
    I added your code to the functions.php and then double checked the .site-title and .site-title a styling to make sure it stayed the same as the original theme styling.

    Nothing appears to have changed after adding the code mentioned above. Any insight?

    #112176

    Tonya
    Member
    Post count: 170

    Did you “add the code” or “modify it”? If added, you actually need to modify the existing code.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #112177

    AC
    Blocked
    Post count: 7712

    I changed the width on this:

    .title-area {
        float: left;
        width: 1090px;
    }

    Then added a top-margin here:

    .site-header .widget-area {
        color: transparent;
        float: right;
        margin-top: -230px;
        width: 298px;
    }
    #112178

    AC
    Blocked
    Post count: 7712
    #112184

    mfd
    Participant
    Post count: 22

    Thanks Tonya- I now modified the existing code and got the icons in the header area…the only issue left, is that now on mobile, the existing header does not shrink down to fit the mobile view…?

    #112192

    AC
    Blocked
    Post count: 7712

    Did you happen to try my suggestion? It worked fine for me.

    #112196

    Tonya
    Member
    Post count: 170

    You’re welcome.

    Let me take a look at the mobile. We need to apply another css for the background image to “contain” it; however, I’ll need to see where to filter the css that is outputted from the core. I’ll get back with you shortly.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

    #112197

    AC
    Blocked
    Post count: 7712

    I’ll unsubscribe since you have this handled.

Viewing 15 posts - 1 through 15 (of 18 total)

The topic ‘Lifestyle Pro Header Layout with header widget’ is closed to new replies.