Is it possible to change the name of the menu item button from "menu" to …?
-
Hello everyone,
I was wonder if it is possible to change the name of the menu item button (present only on mobile view due to narrower space for menu items).
It would be much better if i could change the name instead of “Menu”.Best Regards
The blog I need help with is: (visible only to logged in users)
-
There’s actually a quite tricky way to do it using custom CSS. Here is an example you can try out in your Appearance > Customize > CSS editor:
@media screen and (max-width: 767px) { .menu-toggle { visibility: hidden; } .menu-toggle:after { visibility: visible; content: "?"; } }You can update the “?” content to any other plain text.
If you’d like to learn more about how media queries work, go to http://en.support.wordpress.com/custom-design/custom-css-media-queries/
I also noticed that you have some custom CSS in place that is making it so that top navigation element is no longer clickable after the small screen menu option is open. I looked through your custom CSS a little, and I think rules like this are the culprit:
#site-navigation { position: relative; left:6%; width:110%; text-align:left }You might consider removing rules like that. I see that you have multiple blocks repeated in different areas, so be careful to adjust all the related blocks accordingly or changing it will only work in some srcreen sizes and not others.
-
Hi,
Thank you for that brilliant trick :) works as i wanted
Indeed, when using mobile phones, after clicking the menu button, it can’t be undone.
How should i write the code to define the site navigation item positions, instead of the way i wrote above?
Thank you for your quick answer
-
There are a few different ways you could approach that.
One possible solution, given the current stat of your custom CSS, would be to add this to they very bottom of your Appearance > Customize > CSS editor as the very last rule:
h1.menu-toggle { top: 0em; }The reason for the trouble is that the menu items are overlapping each other. So, moving it up and out of the way should solve the click problem.
-
Hi,
Yep, it looks better this way indeed.
Meanwhile, after using responsinator website, i noticed the portrait view of iphone 5 and crappy android phone (from 240px to 320 px portrait) don’t look as expected, regarding the thumbnail picture…
Which code could i use to fix that?
Sorry for the extra issue
-
Because you have so many repeated rules in various @media blocks, some of which rule each other out and some of which don’t, it is very difficult and time consuming to troubleshoot your CSS. I can help guide you if you, but you will need to do the work to find what to remove yourself if the problem is CSS-related.
Regarding the issue about thumbnails, you said “don’t look as expected, regarding the thumbnail picture” but I am not sure what the expected view is. I assume you are referring to how the first image looks a little stretched. Here is what I see for http://partyinwarsaw.com/ in the site you mentioned: https://cloudup.com/cYp83UBrSO9 and here is what I see in Firefox 33: https://cloudup.com/cKLwInItBOy The reason the first image looks stretched is because the image aspect ratio is much too short for its width.
Here is a link to the image for reference:
https://partyinwarsawdotcom.files.wordpress.com/2014/10/sheesha-opening.png?w=788&h=280To fix that, you can use a featured image that has an aspect ratio closer to 4:3
-
Hi,
Sure, i need to check those rules one by one and try to make everything perfect, you are right.
Here is a example of something “not expected”:
http://s1.postimg.org/yx0or204v/issues.pngSo there is a common text displacement in the crappy android and iphone 5 (so probably something wrong between 240 and 320 px), and then in the landscape view, the “pink rectangle”, i think #content or something like that is too small comparing with the rest of the site.
Without running all my css code, are these some specific codes i could use to fix these 2 issues, by seeing these pictures?
Thank you for your patience,
Regards
-
I’m sorry but I’m not sure what’s making the text overflow in those containers!
One thing you can do to troubleshoot would be to remove all of your @media rules that affect the 240 to 320 px screen size (make a backup of your CSS first), then clear your browser cache so you are certain as possible that the responsinator site you are looking at is seeing the latest saved version of the custom CSS, then test in responsinator again. If the problem goes away, add back the CSS @media wrapper, including the end bracket, then add back the CSS inside it one bit at a time until you find where the problem is happening.
Another possible option might be to just try making that text slightly smaller for really small screen sizes. Though, I think the first option above is a better way to go—it’s more time consuming, but it will make the CSS cleaner in the end.
-
Hi,
Good idea. In fact i did what you proposed before, and i noticed the problem is above the code concerning the smartphones.
For instance, in the landscape vision, the container (the main box with title and pictures) is too small comparing with the rest…..which code should i use to make it bigger and basically the same size of the remaining items of the site?
Regards
-
When you refer to issues, can you always include a very specific references? Referring back to screenshots is great, and including examples of text is also really good.
In this screenshot http://s1.postimg.org/yx0or204v/issues.png if I look at the iPhone 5 landscape example, I see a pink rectangle with the text “Organza Club” centered below the “Official Website” text. Is your goal to make that rectangle full width?
-
You know, I just checked http://partyinwarsaw.com/category/organza-club/ on my iPhone 5S and it looks like this to me in landscape mode: https://cloudup.com/c_2SDOHel7E
So I think you might be using a simulator to make some decisions and you really need to be careful because simulators can only do so much—they aren’t perfect. In any case, I think the white “Organza Club” text in the pink rectangle on the http://partyinwarsaw.com/category/organza-club/ page looks fine on an iPhone 5S in landscape mode.
-
Hi,
My goal, concerning the landscape view, is to have the website looking like in the iphone 5S your picture’s link demonstrates.
At home, i’m testing also using a sony erickson xperia arc s, a tablet 7′ and a ipad.
Using the xperia arc s (width portrait 480 x width landscape 854) in the landscape view, i obtain the same result as the one presented in the http://s1.postimg.org/yx0or204v/issues.png: the pink box is not in with the same dimensions as the rest.
-
Meanwhile, i tried something: i deleted all the code and check how the mobile view works:
So this pink rectangle (‘organza club’), by default is exactly how it looks in the link i sent you, therefore, i presume i will have to write some code to enlarge /extended it, to make in most of the smartphones, just like you got in your iphone 5.
-
My goal, concerning the landscape view, is to have the website looking like in the iphone 5S your picture’s link demonstrates.
It already looks that way to me in iPhone 5s, so at least you’re good to go on that one!
At home, i’m testing also using a sony erickson xperia arc s, a tablet 7′ and a ipad.
I’m sorry but I don’t have those options to test with.
Using the xperia arc s (width portrait 480 x width landscape 854) in the landscape view, i obtain the same result as the one presented in the http://s1.postimg.org/yx0or204v/issues.png: the pink box is not in with the same dimensions as the rest.
It will take a lot of work to sort this out. I can point you in the right direction.
Meanwhile, i tried something: i deleted all the code and check how the mobile view works:
Removing all the code and focusing in on one area at a time is exactly what you should do when troubleshooting.
If you use the buttons at the bottom of the Appearance > Customize > CSS editor to change screen sizes, you can get a good approximation of the major breakpoints that will cover a majority of devices. I used that view combined with Chrome’s built-in web inspector to figure out that this might be the type of thing you want to change:
@media screen and (max-width: 767px) { .blog .hentry, .archive .hentry, .blog .hentry:first-of-type, .archive .hentry:first-of-type { margin: 0; width: auto; } }You will need to test this on your various devices on your own. If it doesn’t work, try it without any of your other CSS applied. If it works after that, then it’s possible that you have so many various conflicting rules already saved in different media queries in your custom CSS that something in one of them is overriding the change. If you get to a point like that, then to figure out what is interfering, you will need to do some more detailed troubleshooting. What I would recommend is removing all of your CSS and adding it back one step at a time, making sure to do a hard refresh in the browser or device after each save. It’s very time consuming to do this, but it’s the only way to really get to the bottom of a conflict when the CSS has gotten so complex. Try the snippet above, except put it in to the proper @media block in your own CSS (you probably already have one for a 767px break point). If you run into trouble, try the troubleshooting steps of removing all the CSS and adding it back bit by bit.
-
Hi,
Thank you very much for the description.
I will proceed as you suggested and if something comes up, i will notify you
Regards
- The topic ‘Is it possible to change the name of the menu item button from "menu" to …?’ is closed to new replies.
WordPress.com Forums 
