Mobile Menu shows only one bar

Hi @terry777

Thanks for reaching out.

Hash Scroll Offset shouldn’t be necessary in Ultra anymore. Anchor links and offsetting are now handled internally.

Unfortunately, it’s very hard to help diagnose this problem without taking a look at your site. Please, send a link and I’ll dive in.

Hi, thanks for responding so quickly. The site is https://cbeeducationalservices.org/
With the plugin, the anchors are working. Without it, they weren’t. The home page has 4 anchor links that take the user to a section of the Our Work page. I had found, I think on your premium forum, the info about the plugin. Must be an old post that you’ve since fixed in the theme? Anyway, I used a setting of 100 for the offset, but that was just a guess, so maybe that’s a problem. I just deactivated the plugin, to check again if that’s the problem. Sometimes the change doesn’t show up when I refresh, so I’ll leave it off for awhile.

By the way, I just updated Ultra to 1.18, just this minute.

I just noticed that in addition to the menu being off, the top of the header wass cut off as well, so maybe it is the plugin? Of course, I can’t seem to replicate that.

So, for the time being, the plugin has been deleted, the menu on the ipad is showing only one bar, and the anchor links aren’t going to the right place on the page.

I was able to replicate header being cut off at the top a minute ago (on the ipad) by tapping the one menu bar and then the X, but it’s inconsistent, I can’t do it again. Argh!

I just looked at the site in Safari (I usually use Firefox on my pc) on my pc, and the menu is only showing the one bar when I reduce the window size. Chrome displays it correctly, as does MS Edge and IE. So it’s only an issue with Safari, apparently, on both the ipad and the pc. I don’t have a smartphone to check it on that.

The problem has to do with the new em base that is being set in Custom CSS. If you remove that rule, the problem resolves. Go to Appearance > Custom CSS and close the last rule, there is no closing bracket there. After the last rule, add:

.responsive-menu .menu-toggle {
    font-size: 14px;
}

If you can show me where your anchor links are I can take a look at that problem.

I don’t have Appearance > Custom CSS, but I do have the plugin “Add Custom CSS”, and yes, I see the missing bracket – oops! So, I added the bracket, and the code you stated above.

The reason I had the css was to make the default font larger, but maybe I did it in a wrong way?
I added (without the ending bracket):
/* set default font larger */
/* default is 1 em */
body, button, input, select, textarea {
color: #5a5d60;
font-family: “Lato”,sans-serif;
font-size: 1.3em;
font-weight: 400;
line-height: 1.7857;
}
But maybe there’s a better way? I see it’s fixed on my ipad, but in Safari on my pc it isn’t. The height of .responsive-menu .menu-toggle is only 20px, and if I increase it in the Web Inspector in Safari to 60px, the 3 lines show, and the X shows fully.

So, what’s the correct way to change the size of the default font, without breaking anything else?

Again, thanks for going above and beyond in this. I suspect that purchasing the full theme will help with these things, and probably save me some time too.

As to my anchor links issue, any suggestions there other than putting the plugin back in?

Sure ??

No problem with what you’ve done. You don’t need it all, you could just say:

body, button, input, select, textarea {
	font-size: 1.3em;
}

Alternatively, you can rather do it as follows:

#primary label, #primary button, #primary input, #primary select, #primary textarea, #primary p, #primary ul, #primary ol, #primary table, #primary dl, #primary address, #primary pre, .paging-navigation, .page-links, .site-main .comment-navigation, .site-main .post-navigation {
	font-size: 18px;
}
#primary blockquote {
	font-size: 20px;
}

Are you using a caching plugin? If so, please, clear it. If the fix isn’t working but a change you make in the inspector does fix it, by all means, apply that change in Custom CSS as your fix. So if 60px does the trick, use that.

If you can show me where your anchor links are I can take a look at that problem. Sorry, I’m not seeing where they are in your site. Please, can you send a link to the page and indicate where on the page they are. Thanks ??

Thanks again.

The anchor links are on https://cbeeducationalservices.org/, and are the first 3 links that say “Click here for more info”. They all go to the same page, but the 4th goes the furthest down the page (which isn’t that long), but the top of the page is displayed in all 4 cases.

Please, try testing with ID’s and see if that helps:

<a name="leadership"></a>

changes to:

<a id="leadership"></a>

Is there an advantage to
#primary label, #primary button, #primary input, #primary select, #primary textarea, #primary p, #primary ul, #primary ol, #primary table, #primary dl, #primary address, #primary pre, .paging-navigation, .page-links, .site-main .comment-navigation, .site-main .post-navigation {
font-size: 18px;
}
#primary blockquote {
font-size: 20px;
}

I don’t want to mess anything else inadvertently, the way I did the menu.

No caching plugin. Should I be using one?

id= rather than name= worked! Thanks! I guess I was using an old way of doing it that once worked but now doesn’t.

• This reply was modified 8 years, 3 months ago by terry777.

There is no advantage, it’s just more specific. It’s completely up to you what scope to use in your Custom CSS. What you had originally is 100%.

Using a caching plugin is up to you.

The reason I ask is because I can’t see any change in your Custom CSS which is why the menu icon fix isn’t working. If you have applied the fix then this means your changes aren’t reflecting because of caching. If you’re hosting with say GoDaddy, there is a clear cache link in the top WP menu.

I haven’t made the height change yet, is that what you’re referring to? Since I know nothing about coding for pc vs responsive devices, I just wanted to make sure I wouldn’t “break” anything else.

I knew I saw a clear cache somewhere recently! That was it, in the GoDaddy bar! But that would just be for the browser I’m working in, right?

Ok, I made the height 60px, and it’s working correctly in Safari now, both on my PC and ipad. Thanks.

• This reply was modified 8 years, 3 months ago by terry777.

You are a lifesaver, and as responsive as your theme! Thanks so much!

Glad I could help ?? All the best with your site.

(The GoDaddy clear cache link is for your website’s cache so it applies for everyone viewing your site. It’s basically a built in caching plugin. If you go to Plugins you should see a sub-menu item in the page called Dropins. That list is basically compulsory plugins GoDaddy run for you. Summary, you’re using a caching plugin installed by GoDaddy.)

Ok, thanks again. Good to know.