How to add HTML in header - by mozomarket

This topic has 13 replies, 3 voices, and was last updated 8 years, 10 months ago ago by Eva Kemp

  • Avatar: mozomarket
    mozomarket
    Participant
    May 2, 2015 at 14:53

    Hello. Here is a brief video that shows what I am trying to do:

    http://screencast.com/t/xaV8Ove6

    Please, contact administrator
    for this information.
    12 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    May 4, 2015 at 11:43

    Hello,

    I’ve edited the file header-structure-3.php and added this code on line 24:

    <html>
    <div style="width: 500px; height: auto;">
    <h1 style="color: #090763; font-family: 'Gudea', sans-serif; font-size: 25px; font-weight: bold; line-height: 31px; text-align: center;">COME VISIT ONE OF OUR SHOWROOMS</h1>
    <div style="float: left;">
    <p style="color: #565656; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; text-align: center; margin: 0;"><b>5041 N. Western Ave. Chicago, IL</b></p>
    <p style="color: #565656; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; text-align: center; margin: 0;">Office Furniture Sales & Showroom</p>
    <p style="color: #565656; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; text-align: center; margin: 0;"><i>(Mostly Used Office Furniture)</i></p>
    
    </div>
    <div style="float: right;">
    <p style="color: #565656; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; text-align: center; margin: 0;"><b> 7232 N. Western Ave. Chicago, IL</b></p>
    <p style="color: #565656; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; text-align: center; margin: 0;">Used Office Furniture Sales &</p>
    <p style="color: #565656; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 17px; text-align: center; margin: 0;">Purchasing, Plus an Auction House!</p>
    
    </div>
    <div style="clear: both;"></div>
    <div>
    <p style="float: left; color: #3a3a3a; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; line-height: 28px; text-align: center; margin: 10px 0 0 35px; text-decoration: none;"><a style="text-decoration: none; color: #3a3a3a;" href="tel:7732713000" target="_self">773-271-3000</a></p>
    <p style="float: right; color: #3a3a3a; font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; line-height: 28px; text-align: center; margin: 10px 35px 0 0;"><a style="text-decoration: none; color: #3a3a3a;" href="tel:7734653300" target="_self">773-465-3300</a></p>
    
    </div>
    <div style="clear: both;"></div>
    </div>
    <!-- div -->
    </html>

    Please check your header now.
    We recommend to make changes in a child theme http://codex.wordpress.org/Child_Themes not to lose modifications after theme update. So please create child theme and copy the file into there. Create the same structure as in the parent theme – headers/header-structure-3.php.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: mozomarket
    mozomarket
    Participant
    May 6, 2015 at 02:34

    Thank You,

    This looks great. However, can you move it over to the right as shown here:

    http://screencast.com/t/TH8YC1CSS

    Thank You

    Avatar: Eva
    Eva Kemp
    Support staff
    May 6, 2015 at 08:55

    Hello,

    Please add this code in custom.css of the parent theme or style.css of the child theme:

    .header_text {
        margin-left: 40%;
    }

    Regards,
    Eva Kemp.

    Avatar: mozomarket
    mozomarket
    Participant
    May 6, 2015 at 12:25

    Can you create a quick screencast video like the ones that I do to show me how to add that to both. I don’t know how to edit/create .css?

    I only know how to edit basic theme settings and visual composer.

    Thanks

    Avatar: Brian Johnson
    Brian Johnson
    Member
    May 6, 2015 at 12:30

    Hello

    Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.
    You may read about Child Theme here: http://codex.wordpress.org/Child_Themes

    With best regards
    Brian Johnson

    Avatar: mozomarket
    mozomarket
    Participant
    May 6, 2015 at 12:43

    I figured it out. Thank You

    Avatar: mozomarket
    mozomarket
    Participant
    May 6, 2015 at 12:51

    Can you go to http://mozohosting.com/chicago/ from a mobile device?

    Is there a way for that header section to not show in mobile view?

    I would like it to show, but can it display better than it currently does?

    Thanks

    Avatar: Eva
    Eva Kemp
    Support staff
    May 6, 2015 at 13:01

    Hello,

    Please use this code in style.css of your child theme or custom.css of the parent theme:

    @media (max-width:480px) {.header_text {
        display: none;
    }}

    Regards,
    Eva Kemp.

    Avatar: mozomarket
    mozomarket
    Participant
    May 6, 2015 at 13:09

    Thank you. That did work however, I just checked it on my tablet but it doesn’t display properly on their either.

    Is there a way to make the text more responsive.

    You can view the link below to see:
    http://www.responsimulator.com/?url=http%3A%2F%2Fmozohosting.com%2Fchicago%2F

    Avatar: Eva
    Eva Kemp
    Support staff
    May 6, 2015 at 15:00

    Hello,

    I’ve added this code in style.css of the child theme:

    @media (max-width:992px) {.header-logo {
       left: 20% !important;
    }
    .header_text_style {
    width: 350px !important;
    }
    .header_text h1 {font-size: 20px !important;}
    .header_text p {font-size: 11px !important}}

    Please check site on iPad now.

    Regards,
    Eva Kemp.

    Avatar: mozomarket
    mozomarket
    Participant
    May 8, 2015 at 14:32

    Thank You for your help. I have one more header question:

    please view:
    http://screencast.com/t/xErGvAymNq

    Thanks

    Avatar: Eva
    Eva Kemp
    Support staff
    May 8, 2015 at 16:57

    Hello,

    I’ve set black color in Theme Options > Header > Breadcrumbs background. Please check.

    Regards,
    Eva Kemp.

  • Viewing 13 results - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.