Moving menu toggle and page titles with CSS
-
Hello,
I am concerned about my website look and rendering on mobile – the menu toggle displays behind my logo. I want to see if I can use CSS to move page titles to the bottom left of featured images instead of center (on both desktop and mobile) and move the menu toggle to the bottom right of the featured images (on mobile only if possible).
Can you help with this?
Thanks!
I am using the Twotone Theme.
The blog I need help with is: (visible only to logged in users)
-
Hi there, this mores page titles on featured images to the bottom left.
.intro-content { position: absolute; text-align: left; padding-top: 0; padding-bottom: 0; bottom: 20px; }What I would recommend with the site title is that we move it down so that it doesn’t overlap the menu icon at 460px and narrower screens, which is just about when the overlap starts to occur. Give this a try and see what you think. Make sure and view your site on tablet and phone and switch from portrait to landscape on both. In my testing it seems to all work well.
@media screen and (max-width: 460px) { .site-logo { margin-top: 70px; } } -
Hi, thanks so much for your reply. I gave it a try but don’t really like the logo down like that because it gets in front of the pictures too much.. Is there anyways we can move the menu toggle all the way to the bottom right and the page title all the way to the bottom left (as in the corners of the featured image)?
Thanks again!
Leina
-
Give this a try and see what you think.
.site-navigation-toggle { position: absolute; bottom: 0; right: 10px; } #masthead { position: relative; } .site-header-inside, .site-navigation { position: static; } -
It works great!! Thanks so much!
Only problem is that on the home page, the menu toggle falls behind the music player.. What would you suggest to make it more visible on that page only
Thanks again!!
Best,
Leina -
-
On the .site-navigation-toggle rule, change the bottom value from 0 to something like 120px to move it above the audio player and the title (on narrower screens).
-
Perfect, it works!! Thanks so much!
On my iphone 6 the website looks perfect. But I was checking the website on my friend’s iPhone 5 and noticed that the margin do not meet the right side of the screen on her phone.. In other words, there is a small gap between the featured image and content and the iphone screen end on the right side.
Can you please look into this?
Thank you so much.
Best,
Leina
-
Since your site is set to private, I’m not able to view it on my phone. Using the Web Developer in Firefox, I can view responsive layouts and do not see any gap on the right. I don’t see that in my iOS simulator either.
What I am seeing though is there where you placed your menu button on lower left, it is overlapping the back and start buttons on the audio player and on my phone or tablet, I would probably end up not being able to consistently get to the menu without doing something to the audio player. Since I can’t actually view your site on my phone though, I can’t verify this is an issue.
This was one of my concerns when I first suggested keeping it at the top and then working with placement of it and the title so that things wouldn’t get crowded and confused down there. With small tablets and phones, it is always a good idea to have a good bit of clear space between buttons and links so that people don’t end up hitting the wrong thing. On the padding below, I would actually suggest even more than 30px as I still think there could be some tap errors on trying to get to the menu.
You can use the following to move the audio player at the bottom of the header up so that it is less likely to clash with the menu button.
.twotone-player { padding-bottom: 30px; } -
Understood! Thank you once again, your help is much appreciated! Looks much better now.
Another question, the Intro content (page title) on the dancing and photos page appear right infront of Barbara’s face and I would like to see if it is possible to either hide the title on those pages only or move the title to the bottom right on those pages only?
Thank you!!
Leina
-
Leina, each page and post has a unique CSS class in the opening body HTML tag that we can use to target styling to only that page. The following make the intro titles invisible on the Dancing and Photos pages.
.page-id-19 .intro-title, .page-id-29 .intro-title { visibility: hidden; } -
-
I promise I am getting to the end of my list of questions… My website launch is just hours away! =D
Is there anyway to centralize the footer widgets on phones and tablets? They currently display 2 on top (Latest News, Barbie’s Journal) and the third one (Contact) aligned left under latest news. Could CSS make the Contact widget appear centralized instead of aligned left?
Thanks so much! =)
-
Hmmm, yeah we can do that, but one thing to keep in mind is that we will be specifically targeting that widget. If you later add a 4th widget, things are going to go awry and you will have to remove the following CSS when you have even numbers of widgets. The widgets are in two columns between 767px and 600px, so I’ve used a Media Query to limit this change to that range.
@media screen and (max-width: 767px) and (min-width: 600px) { .footer-widgets .block-grid--gutters .widget:last-of-type { margin-left: auto; margin-right: auto; } } -
Amazing!!! Works just like I had envisioned it!
Thank you so much, and thanks for the explanation – I will keep that in mind in case I add another widget.I am really greatful for all the help you have provided! :)
Best,
Leina
-
- The topic ‘Moving menu toggle and page titles with CSS’ is closed to new replies.
WordPress.com Forums 