The new menu option is good save a couple of things. Firstly, it is too small and difficult to spot and secondly would it be possible to fit the word menu to the side of it to help people who don’t know this symbol.
Regards, Jon
You can increase the size of the menu text and hamburger symbol by selecting a larger text size from the Size popup in the Menu section of the Box Inspector. The default size is similar to what Apple use on their website.
The hamburger symbol is pretty universal: softpress.com, bbc.co.uk, apple.com (with a two-bar hamburger), etc. There isn’t a way to add additional text within the menu, but you could add a text box to the left of it.
You can probably adjust the button with CSS, and even use the ::after pseudo-element to inject text next to it.
Setting the label to position: relative makes it a stable anchor for the absolutely positioned ::after pseudo-element. Then the ::after makes the “label for the label” appear next to it.
If you inspect the menu item in the browser, as I have done here, you can also horse around with the individual bars that make up the “hamburger”. You could add another CSS rule in the page head to make them wider or thicker, or make a large inverse button behind them, the possibilities are really endless.
Once you find the right combination of styles to get the look you want, the trick will be to get those rules into your page head. I don’t see any equivalent to Freeway’s page markup (yet – either it’s there, and Jeremy will point it out to me, or it’s on the way). But that would be how I would put this sort of side-car CSS into the page. And if you put it in the master page, it will just “be there” for every other page. You’ll just need to remember that the injected content is there, and leave room for it visually in your designs.
Walter
1 Like
There’s an exact equivalent to Freeway’s page markup (Generic Markup in the Page Inspector) — but it’s simpler to use CSS Markup (also in the Page Inspector).
1 Like
This thread title is something I often think!
I’ll show myself out now…
Just order a bigger one next time. Easy. Adding cheese also helps.
My problem however is of a different matter. Thank you to the two contributors, but Jeremy, your solution didn’t change the size of the hamburger, just makes the menu too big. Walter Davies, good to see it might be solved in a different way, but that is something I have to experiment with using some time.
Jon
There are three hamburger sizes: a small size that is used when the menu text is 15px or smaller, a large size that is used when the menu text is greater than 18px, and a medium size that is used otherwise. Xway translates point sizes and CSS sizes into pixel sizes when making this comparison, but if you choose small text you will get a small hamburger, medium (or large) text will give you a medium-size hamburger, while x-large (and above) will give you a large hamburger.
You could theoretically copy the CSS values for a large hamburger and use these in CSS Markup in order to draw a large hamburger with medium or small text, but you will also need to adjust padding values so that the large hamburger fits within the available space. Xway does these calculations automatically.
It’s possible that the actual problem is caused by the way you’re using font sizes. I’ve had a look at your page in Safari, and it seems that the basic font size (set in the Text section of the Document or Page Inspector) is defined as 2em — which is a little unusual because em is a relative measurement (2em effectively means twice the current font size). It works because twice the current font size will be calculated as twice the default font size (medium), but it’s possible that you are confusing Xway’s menu calculations. Currently, Xway isn’t looking all the way back to the base font size when it calculates the size of the menu text, so I think it is interpreting the menu size (0.7 em) as 0.7 of the default font size (medium) rather than 0.7 times 2 times the default font size — and you are getting a smaller hamburger for that reason.
You should be able to fix this by setting a non-relative font size on the menu. Try using medium in the first instance.
I managed to enlarge the hamburger using your advice, Jeremy. However, and I think I’ve written something similar before, I find the text/font question very complicated in Xway. There are so many options out there! Options that are all justified and useful, I’m sure. In the document, in the page, in the box, in the individual span, or paragraph, or individual word. Not to mention relative em or pix sizes. And to top it off, sometimes it is not possible to change a value because of a wrong setting higher up in the hierarchy.
And yes, I’ve been there and know it is all buried there in the tutorials, but could I humbly ask for some comforting words, and perhaps even a (very) simple resumé of the rules? In your own words.
Thank you.
Jon
My advice is to set styles at the most general level, if possible. Use default styles where possible, so paragraphs, headings, etc. have a consistent appearance, and do this in document settings (Document Inspector) or on a master page (Page Inspector), if you want the styles to apply across different pages. If you want distinctive styles within a box, set default styles for that box (Box Inspector). On the other hand, if you want a distinctive style for a specific paragraph, you can use a paragraph style. At the most specific level, if you want a distinctive style for some text within a paragraph, use a span style - but remember that there are predefined span types that also carry semantic information (e.g. emphasized for emphasis, normally shown in italics, and strong for important text, normally shown in bold) and are therefore helpful for accessibility (e.g. screen readers).
Document settings (in the Document Inspector) represent top-level master settings - from which all other page settings, including master-page settings, are ultimately derived.
The advantage of setting styles at the most general level possible is that it allows you to change the appearance of a site by making a very small number of changes. E.g. if you want to change the font used in headings, you can do this in a single place (e.g. Default Styles in the Document Inspector) rather than having to change every heading.
As for CSS measurement units - ems are useful when dealing with text, and CSS default settings for headings etc. are defined in this way. However, they presuppose a base font size that is set with a non-relative unit. Pixels or percentages are a better choice for box sizes.
The problem you ran into with the hamburger symbol appearing too small on your website is actually a bug in Xway, which we will fix in a future update (Xway should look back to the base font size when calculating the menu font size). It was helpful that I knew your site url so I could check to see what was happening in your specific case.
Thank you so much. Precise, short and to the point.