Return to previous page

How to add HTML in header - by mozomarket

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

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.

#61079 Copied Theme version: 1.4 WooCommerce version: 2.3.8

12 Answers
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>

</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.
#61281 Copied
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

#61894 Copied
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.
#61963 Copied
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

#62025 Copied

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

#62029 Copied

mozomarket

Participant

May 6, 2015 at 12:43

I figured it out. Thank You

#62043 Copied

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

#62049 Copied
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.
#62055 Copied
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

#62059 Copied
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.
#62117 Copied
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

#62732 Copied

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.

#62757 Copied
Viewing 13 results - 1 through 13 (of 13 total)