I have my header set up to use the secondary menu and successfully put a 728x90 banner at the very top of the site. I just have a small css issue that I'm probably overlooking which is causing the main menu/logo section to appear behind the ad area and secondary menu.
Here's what I did so you can follow along if you're looking to do the same:
STEP 1: MAKE THE SECONDARY MENU & MAIN MENU (WITH LOGO) SECTIONS SCROLLABLE
Since I'm adding a banner ad up there it will eat up too much permanent real estate. There's no setting in the theme options that will do this so here's how I went about it:
First disabled the "Header Resize On Scroll" option in the Header Options.
Then I added the following CSS in the Custom CSS Code box:
@media only screen and (min-width : 1px) and (max-width : 1000px) {
body #header-outer {position: relative!important;}
body #header-secondary-outer {position: relative!important;}
}
STEP 2: CREATE BANNER AD CSS
I want my banner to be centered so I added this css to the Custom CSS Code box:
STEP 3: ADD YOUR BANNER CODE WRAPPED IN YOUR DIV TO HEADER.PHP
I've tried posting my banner code but it won't show up here. In any case, just take the banner code given to you from your advertising network and wrap it in a div with the css class/id you created.
Mine is sandwiched between div id="header-secondary-outer" and div class="container" in header.php
THIS IS WHERE I'M STUCK - my logo and main menu are hiding behind the advertisement and secondary header sections. How do I pull it down? I know there must be a simple CSS solution and I'm hoping a fresh of eyes can spot my mistake.
That worked for desktop size but I get a white space in between the top menu and main menu area on smaller screen sizes like tablet and mobile. Almost there!
Perfecto! That did it. Thanks for your help! I don't know if there's a way to change the title of this thread so people know they can use this as a complete guide for adding an advertisement spot to the top of their site.
Hi all,
I have my header set up to use the secondary menu and successfully put a 728x90 banner at the very top of the site. I just have a small css issue that I'm probably overlooking which is causing the main menu/logo section to appear behind the ad area and secondary menu.
Have a look:
http://dev.gearheaddiva.com/home-cooked/
Here's what I did so you can follow along if you're looking to do the same:
STEP 1: MAKE THE SECONDARY MENU & MAIN MENU (WITH LOGO) SECTIONS SCROLLABLE
Since I'm adding a banner ad up there it will eat up too much permanent real estate. There's no setting in the theme options that will do this so here's how I went about it:
First disabled the "Header Resize On Scroll" option in the Header Options.
Then I added the following CSS in the Custom CSS Code box:
#header-secondary-outer {position: absolute!important; top: 0px!important;}
#header-outer {position: absolute!important;}
@media only screen and (min-width : 1px) and (max-width : 1000px) {
body #header-outer {position: relative!important;}
body #header-secondary-outer {position: relative!important;}
}
STEP 2: CREATE BANNER AD CSS
I want my banner to be centered so I added this css to the Custom CSS Code box:
#leaderboard {display:block; text-align:center; height:90px;}
STEP 3: ADD YOUR BANNER CODE WRAPPED IN YOUR DIV TO HEADER.PHP
I've tried posting my banner code but it won't show up here. In any case, just take the banner code given to you from your advertising network and wrap it in a div with the css class/id you created.
Mine is sandwiched between div id="header-secondary-outer" and div class="container" in header.php
THIS IS WHERE I'M STUCK - my logo and main menu are hiding behind the advertisement and secondary header sections. How do I pull it down? I know there must be a simple CSS solution and I'm hoping a fresh of eyes can spot my mistake.
Thanks!
Hey Rachel! :)
Add this into the Custom CSS box located in your Salient Options panel:
body #header-outer[data-using-secondary="1"] { top: 122px!important; } body #header-space { height: 234px!important; }Cheers :)That worked for desktop size but I get a white space in between the top menu and main menu area on smaller screen sizes like tablet and mobile. Almost there!
Add this too :)
@media only screen and (min-width : 1px) and (max-width : 1000px) { html body #header-outer[data-using-secondary="1"] { top: 21px !important; } }Perfecto! That did it. Thanks for your help! I don't know if there's a way to change the title of this thread so people know they can use this as a complete guide for adding an advertisement spot to the top of their site.