Changing the Header Add an Extra DIV - Support | Kriesi.at

Tagged: enfold, header

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
September 19, 2013 at 5:31 am #163378
infiniteloop
Participant
Hi.

I just bought Enfold Theme, very nice.

I need to insert an image above the header, I was wondering if I can insert a new div tag in the header.php file. The div is going to have a sinle image and nothing else.

Coul you provide the PHP code? I’ll appreciate that a lot.

Thanks, regards.
- This topic was modified 10 years, 7 months ago by infiniteloop.
September 19, 2013 at 2:03 pm #163581

Yigit
Keymaster

Hello infiniteloop!

Can you post a screenshot and show us where exactly you would like to display image on header?

Best regards,
Yigit

September 19, 2013 at 5:20 pm #163686
infiniteloop
Participant
Hello Yigit, Thanks for your answer.

This is what I have now:
http://postimg.org/image/k5er27bq9/

And I would like to have this
http://postimg.org/image/ue7880zs1/

So I was wondering if I can have another div element above the main header and inside the main container. I´m using the small header fixed type, no social Icons, but maybe my client would like that in the future. Also I thought that maybe I can have a <body> background-image and set a margin-top for the main container

This is my HTML code as generated by the server:
```
<div id="wrap_all">
    <span class="web-developer-id-class-details"> … </span>
    <div id="header" class="header_color light_bg_color mobile_drop_down">
        <span class="web-developer-id-class-details"> … </span>
        <div id="header_main" class="container_wrap container_wrap_logo">
            <span class="web-developer-id-class-details"> … </span>
            <div class="container" style="height: 140px; line-height: 140px;"> … </div>
             
        </div>
        <span class="web-developer-id-class-details"> … </span>
        <div class="header_bg"></div>
         
    </div>
```
My background image is in the Div class “header_bg” and this is the CSS:

.header_color .header_bg {
background-attachment: scroll;
background-image: url(“http://localhost:8888/ENTREVENTOS/wp-content/uploads/2013/04/header_image_2.png”);
background-position: center top;
background-repeat: no-repeat;
}

Best, thank you very much.
September 20, 2013 at 8:01 am #163941
Ismael
Moderator
Hi!

Edit header.php, find this code:
```
<div id='wrap_all'>

		<?php if(!$blank){ ?>
```
Below add something like this:

<?php echo '<div class="header-top"></div>'; ?>

Then add this on your custom.css or Quick CSS:
```
.header-top {
	position: relative;
	z-index: 400;
	width: 100%;
	height: 100px;
	background-color: transparent;
	background-attachment: scroll;
	background-image: url('IMAGE URL HERE');
	background-position: center top;
	background-repeat: no-repeat;
}
```
Regards,
Ismael
September 20, 2013 at 3:44 pm #164088

infiniteloop
Participant

Hi Ismael,

Thanks a lot! I´m working on this and seems to work, now I’m having some issues with -I think- transparencies and z-index, trying to find the code to fix it, maybe I wil have to bother you again. In the meantime, I´ll try my best :)

September 20, 2013 at 7:50 pm #164197

Josue
Inactive Moderator

Hola!

If you upload your site and post the link we can easily help you with that :)

Cheers!
Josue

September 20, 2013 at 8:10 pm #164208

infiniteloop
Participant

Hola Josue!

¿Hablas Español? :)

Thanks a lot you guys! I’m working locally at the moment, I think I´m not doing it so bad :) I inserted the code as Isamel told me and it worked, nevertheless I needed to have that extra div inside the “fixed header div” so I inserted the code into that div and it´s working better. I had to make some adjustings to margins. Other Header Options like social icons re not working well.

I’ll upload the site this weekend, post my custom tweaks to the code so you can teel if I’m doing it really bad! :)

Thanks again!

September 20, 2013 at 8:14 pm #164210

Josue
Inactive Moderator

Hola,

Si, si te sientes mas cómodo puedes escribir en español, aunque seria mejor que lo hagas en otro hilo ya que aquí esta interviniendo el resto del team.

Sobre tu sito, estamos a la espera entonces a que lo subas para poder ayudarte mejor :)

Saludos,
Josue

September 23, 2013 at 10:38 pm #165332
infiniteloop
Participant
Hi Guys!

I’ve got my site online:

http://entreventos2.lafabricadigital.com.mx/

Issues I’m having trouble with:

1. Menu Links: Placing cursor exactly over links does not work. Link is below type.

2. I used a smaller logo (227 x 123px) than the recommnded maximum size on the administrator theme options which is 340 x 156 px, nevertheless logo keeps resizing. I don’t want that because it loses resolution, original size is -almost- pixels perfect :)

3. On resposive, logo falls over my <div id=header-top>, also breadcrumbs and main container are not where they should be, For sure is the margin I’m using in desktop viewport.

4. Fixed Header with social icons and links falls over header-top image. Maybe client would request taht in the near future.

Maybe making header-top image responsive (reducing size as viwport changes) would help?

Here is the code:

Header.php
```
<div id='header' class=' header_color <?php avia_is_dark_bg('header_color'); echo " ".$headerMenu; ?>'>
        
        	
        <?php echo '<div class="header-top"></div>'; ?>
        

		<?php

		$social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');

		//subheader, only display when the user chooses a social header
		if(strpos($headerS,'social_header') !== false)
		{
		?>
```
Custom CSS:
```
.container_wrap {
    border-top: none;
}
.header-top {
	position: relative;
	z-index: 400;
	width: 100%;
	height: 80px;
	background-color: transparent;
	background-attachment: scroll;
	background-image:url(../../themes/enfold-child/images/header_image_2.png);
	background-position: center top;
	background-repeat: no-repeat;
        margin-bottom: -50px;
}

.title_container{
        margin-top: 35px;
}
```
Needless to say I’m not sure if I’m doing this the right way. I’ll appreciate your help a lot.

Thank you, regards.
September 24, 2013 at 5:24 am #165473
Ismael
Moderator
Hi!

1.) Add this on your custom.css:
```
.header-top {
z-index: 1;
}
```
2.) To increase the logo size, use this:
```
.logo, .logo a {
height: 115px;
margin-top: -13px;
}
```
3.) Use this to resize header top on smaller screens:
```
@media only screen and (min-width: 768px) and (max-width: 989px) {
.header-top {
z-index: 1;
width: 80%;
height: 80px;
margin: 0 auto;
}
}
```
4.) I’m sorry but you need to open a new topic for this if in case the client requested it.

Best regards,
Ismael
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Changing the Header Add an Extra DIV’ is closed to new replies.