Social Icons on mobile

Okay so I found out where the social icons are displayed on mobile. They are on the bottom of the page. Is there anyway to edit the css to have them display on the top of the page? Seems lost on the bottom.

Hi @lchikamoto,

You could force the social media icons to display at the top of your page on mobile with the following custom CSS:

.site-top {
	display: block;
	visibility: hidden;
}

.search-navigation {
	top: 60px;
}

@media screen and (min-width: 960px) {
	.site-top {
		visibility: visible;
	}
}

@media screen and (max-width: 960px) {
	.site-top .social-navigation {
		visibility: visible;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
}

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Let me know how you get on with that! The above CSS worked on my own test site but, if it doesn’t quite work for you, please share a link to your site so that I can test further.

Thanks!

Totally worked thanks!

Im going to mark this topic as resolved

Perfect! ?? We’re right here if extra questions come up too.

actually I spoke too soon. So that css worked and got the icons on the top of the screen on mobile but on the desktop view it pushes the top menu down into the photos and also pushes the bottom line underneath the menu right beneath the top line making it appear to be 1 thick line. There used to be two lines, one above the menu and one below it. I tried editing the .search-navigation block of css and changed 60px to something like 40px which pushed the menu bar above the photos but the line was still messed up. Here’s a link to the site again, I’m keeping the css in so you can see what’s going on. https://www.glamourmodelingandphotography.com

Hi @lchikamoto,

I’m sorry about that oversight on my part!

You’re right that the padding added to the top of .search-navigation is the problem here.

We only need to add that padding to the top on devices that are 960px in width or smaller. A media query can be used in order to target devices of that width.

@media screen and (max-width: 960px) {
	.search-navigation {
		top: 60px;
	}
}

Try wrapping the above media query around the CSS for .search-navigation and let me know how you get on.