svg files

khalidmuharragi, thanks for the compliment of course but really it was just a hack. I just tried my best to duplicate what Kriesi did. So credit goes to him or course. But to your question. The code completed the way Kriesi does it, is more elegant, his logo is the hexagon and it is the same size regardless of browser window. He embellishes is with adding the text to the right when the browser window is large and then hides the text as the browser gets smaller. With the social icon code modified this way on a mobile browser screen size the social icons are left in the middle of the header. When Kriesi hides the logo text he is left with a clean header. Logo left social icons center and nav menu button right.

You however on running into the problem that I had. Your logo is horizontal. so it is taking up the space were the social icons end up. Before I tell you what I did know this. I am only learning css and html, and php is foreign to me so take this with a grain of salt please. Depending on the number of social media links you try and use you could altogether have another problem. There is only so much room at the top between the logo and menu button. So i found with even say 5 icons you were running out of room up there so bear that in mind.

So you have probably many solutions but the simple answer is you need to change/shrink your logo as the browser window gets smaller. You can probably accomplish this many ways, My first thought would be in the header php file. actually make 2 logos with unique ids. then with Media queries in your custom css file, show the large full logo in all browsers but the small mobile size and at that time hide the large one and show the small one. I however doen’t know how to right php so I didn’t do it this way. So if someone knows how please add this solution as it is probably the best. If there is a better one then please enlighten us.

What I did was a bit of a hack. I hid the logo image and add a background that was a icon version of my logo when the screen size got to a certain size. This works but it has one huge drawback. The clickable portion of the logo is still actually the original wider size and if someone tries to drag the icon to the desktop they actually get the logo not the visible icon. If this doesn’t bother you or you can tweek it to make it better, then make a smaller squareish version of your logo and then add this code.

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

	/* adds the jack and addi icon as a background */
	div .logo {
		background: url(https://yourownpath/logoicon.png) top left no-repeat;
		top: 11px;
	}
	
	/* makes the default logo transparent */
	.logo img {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	
}

I then had a problem with placement on a vertical iphone so i did this. yours will be different based on your logo size. I also enlarged the social icons for more ease of clicking on a phone

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

	/* moves the icon logo on smaller screens */
	.responsive .mobile_slide_out .logo {
		margin-top: 10px;
		margin-bottom: -10px;
	}
	
	/* change social icons */
	#top .social_bookmarks li a {
		font-size: 19px;
		width: 40px;
	}
	
}

Hope this helps

• This reply was modified 10 years, 10 months ago by allegrabillings.