[shawn]

Hi,

I just bought the theme, liking it so far. I’m having a few issues.

1. I want to have a full wide banner displayed as my header, which I accomplished simply by uploading the appropriate image and setting my header margins to 0 px. HOWEVER, I also have a 720×90 ad placed in the “header top sidebar” widget, and these 2 conflict, what happens is that, the 720×90 ad is displayed on top, and then my site header is shown below it. What I want to accomplish, is to have the 720×90 ad OVERLAY, the header image. What can I do to accomplish this?

2. I wanted a different position for my search bar, because as mentioned in question 1, I want my whole header just to be covered with the banner design (and ad overlaying it). So I want the search bar to be displayed at the end of the menu bar. Looking in the forums, I found this code, and set it so it fits the position:

#header-content {
    position: relative;
}
#sidebar-header-right { 
	position: absolute;
	top: 13.3em;
	right: 0;
	text-align: right;
}
@media screen and (max-width: 767px) {	
	#sidebar-header-right {
		margin-top: 0;
		padding-top: 15px;
		position: static;
		text-align: center;
		width: 100%;
	}	
}

Is this right? I used this code, and it worked fine when I tested it out on my browsers, here’s how it looked: http://imgur.com/PyuVLbv

However, using browserstack.com to see how it’s displayed on other browsers/OS, I found it doesn’t look right. Windows 8 firefox: http://imgur.com/46lQIIg – windows 7 ie8: http://imgur.com/CL1T4FS

What do I do, so the search bar is placed in the right position for all browsers?

3. I’m using the no side, full width layout, and using 3 footer widgets. On mobile, I don’t want ANY of the footer widgets to be displayed. I used this code:

@media screen and (max-width: 960px) { #supplementary { display: none; } }

Is this correct? On my mobile, it works, however, I’ve noticed it doesn’t work for other mobile screen sizes, what’s the fix?

4. At the bottom of each post, I have this code displayed:

<span class="nav-previous"><?php if ( function_exists( 'ADDTOANY_SHARE_SAVE_KIT' ) ) { ADDTOANY_SHARE_SAVE_KIT(); } ?></span>
						<span class="nav-next"><?php echo do_shortcode ('[post-views]');?>

This displays social media on the left, and post count on the right. It looks good on pc, however, on mobile, the social media icons go out of the content area. Here’s screenshots: http://imgur.com/FlOCRDo & http://imgur.com/sKbDWsq – As you can notice, the icons and post count go below the content area, how do I fix this?

For reference, this is my website: dubzonline.ws – Thank you for any help!

[Sakin]

@shawn:
1. When you add any widget in Header Top Sidebar, it will show above your header. So, you need to move that ads from Header Top Sidebar to Header Right Sidebar. So, there is no option to move Header top Sidebar. If you want to do advance coding to change the potions then you need to build child theme and edit the hooks.

2. You css for search box looks fine. You need to replace your css:
#header-content {
position: relative;
}
#sidebar-header-right {
position: absolute;
top: 13.3em;
right: 0;
text-align: right;
}
with the following:

@media screen and (min-width: 961px) {
    #header-content {
        position: relative;
    }
    #sidebar-header-right {
        bottom: -37px;
        position: absolute;
        right: 0;
        text-align: right;
    }
}

[shawn]

@Sakim

Thank you for the help! Could you help me with questions # 3 and # 4 as well?

[Sakin]

@shawn:
3. Yes, your css is correct. All the mobile devices below 960px will not see the footer widgets. In which mobile screen it’s not working. Let me know it. I hope you are not talking about iPad landscape which uses 1024px.

4. Your content has overflow issue, so just add the css hack below in “Appearance => Theme Options => Custom CSS” box:
#content .post { height: 1%; overflow: hidden; }

[Author]

Posts