Is there any way to make the Wooommerce “cart_dropdown_link” appear in the enfold header in responsive mode? Here are screen shots of the cart slider (top right) at normal screen size and in responsive mode: http://nexuscontentlab.com/temp/

Thanks mike.

Hi, I’m trying to create an effect where an image of a bottle, placed to left side starts in the header, covers a portion of the main content and ends in the footer. So the effect is that the bottle “pops” out of the web page. The main content should contain a layer slider and the footer should have widgets as usual. Is this possible? The height can be static. When I place the bottle in the background it breaks on smaller screens. Could you put it as a transparent image on top of everything? Or use different CSS for different viewports.
I can provide an image of the desired effect if that would help. Really hope you can help with this, I’m getting close to dead line and can’t get it to work. And my client really want this effect.

How can i make sure everthing looks the same for every device ( ipad/desktop/laptop )

I made a slider on my desktop . everthing is centred but on ipad i can’t see the things i changed to the slider
and on the laptop ( different resolution ) everything is more to the right .

• This topic was modified 12 years, 4 months ago by iluvatoq.

I have the nonfixed header set, but randomly the feature stopped working. Is it not compatible with a background image or something?

igorsantosbjj.com

Hello Support Team,

I have a question concerning the social icons. I have managed to add a dotted divider to the top right corner of the homepage. The social icons however do not seem to appear next to the dotted line (small fixed header with social Icons).

If I change the header options to non Fixed Header with Social icons, I can see the icons and they go to the center when the window size changes (just like on your site).

What do I have to change to I can see the social icons on the top right corner (small fixed header with social icons)? Here is my style.css code:

/*header with social icons - change how large the height can be */
.social_header #header_main .container, .social_header .main_menu ul:first-child > li a { height: 80px; line-height: 80px; }

/* changes social hover from circle to rounded square */
#header_main .social_bookmarks li a {
	border-radius: 3px;
	font-size: 16px;
}

/* moves the main nav left and changes right border */
#top .main_menu {
right: 100px;
border-right-style: dashed;
border-right-width: 1px;
padding-right: 25px;
}

/* moves the social nav to the right of main nav */
#header_main .social_bookmarks {
position: absolute;
top: 50%;
margin-top: -15px;
right: 0px;
}

/* hides the normal social div at the top */
#header_meta {
	display: none;
} 
 
/* removes border */
.responsive #header_meta .social_bookmarks li {
	border-style: none;
}

/* removes border */
.responsive #top #header_meta .social_bookmarks li:last-child a {
	border-style: none;
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

	/* removes padding at the top behind logo after I shrink the main logo/navigation div height */
	.fixed_header.social_header #main {
		padding-top: 81px;
	}
	

}

/* Smaller than standard 960 (devices and browsers) (ipad Portrait)*/
@media only screen and (max-width: 989px) {

	/* adds the HKUSCG as a background */
	div .logo {
		background: url(https://www.hkuscg.com/wp-content/uploads/2013/10/S3transparentbackground-e1382792986200.png) top left no-repeat;
		top: 11px;
	}
	
	/* makes the default logo transparent */
	.logo img {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */

	
	/*gives more space below main blog name when it is long and wraps to two lines on phones*/
	.title_container .main-title {
		line-height: 1.5em;
	}

	/* moves the icon logo on smaller screens */
	.responsive .mobile_slide_out .logo {
		margin-top: 10px;
		margin-bottom: -10px;
	}
	
	/* moves socket nav away from top link */
	#socket .sub_menu_socket div {
		float: right;
		margin-right: 60px;
	}
	
	/* change social icons */
	#top .social_bookmarks li a {
		font-size: 19px;
		width: 40px;
	}
	
}

I would like to thank you in advance.

Regards,

Frank.