Hi there!
Could you please provide a link to your site? I’ll then be able to test specific CSS that will work for you.
Thanks. 🙂
Hi, Siobhan,
Thanks for replying. Unfortunately, the site is in the middle of a redesign, so it’s not live. Hopefully this screen shot will help: http://storiesonstagedavis.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-12-at-8.06.46-AM.png
I’ve added this code to the custom CSS to align the logo:
.site-logo {
width: auto;
float: left;
}
And this CSS to align the navigation menu:
.main-navigation {
padding: 0;
border-bottom: none;
border-top: none;
float: right;
float: top;
}
And, finally, I used this code, found in a previous thread, to move the social links above the nav menu:
#page {
position: relative;
}
.social-links {
position: absolute;
top: 145px;
right: 0;
color: #000;
}
I hope this is helpful. Let me know if I can provide any further info.
Hi @storiesonstage,
The CSS you need to move the menu to the top of the page on mobile devices is fairly complex and, as you’ve made changes to the default positioning of the menu, it’s very tricky for me to be able to provide specific CSS without access to your site.
I did add the custom CSS you provided in your last reply to my test site and had some success moving the menu on mobile devices using the following:
@media screen and (max-width: 768px) {
.site-branding {
position: relative;
}
.main-navigation {
position: absolute;
top: 0;
right: 0;
}
}
The above makes use of a media query in combination with this CSS trick to move the menu to the top right of the main header area on devices that are 768px in width or smaller.
You can try that custom CSS as a starting point and see how you get on from there. If you’d like more help, please consider making your site public first.
Thanks, Siobhan! This does move the menu up, but it covers the logo. For now, I think it’ll work fine where it is. When the site’s actually live, I might revisit this.
@storiesonstage: Ah, you could try increasing/decreasing the values of top and right in the CSS I gave to move the positioning of the menu. For example, the following would move the menu 10px from the top and right:
@media screen and (max-width: 768px) {
.site-branding {
position: relative;
}
.main-navigation {
position: absolute;
top: 10px;
right: 10px;
}
}
When you site goes live, feel free to post back here and we can then be more accurate in our replies too.
