Tranparency in mobile menu background, different formatting for mobile vs deskto

  • Hi,

    I would like to achieve a few things with the Twenty Twenty-Two theme that I don’t find in the options:

    1) I would like the text in the header (site title etc.) to be aligned right when browsed from a mobile phone, as opposed to left which is the case for PCs.

    It would be good if I could also limit/fix it in terms of what part of the header it may take – but again, this should also apply to the mobile version only.

    Shouldn’t there be two separate editors available in WP themes in general – one for desktop and one for mobile? Or even three – one for tablets as well? It makes very little sense to program everything in one editor, since the devices on which the site will be shown will be very different from each other.

    2) I would like to have semi-transparent background for the mobile menu where I myself can define the colour and opacity – are there no such options in the editor, or I don’t find them, and how can I set those parameters?

    The next one is not the biggest deal in the world, but it would also be good to know how to:

    3) make the mobile-menu background appear only under the hamburger button and for as far down as the menu items require, i.e. to not cover the entire screen when shown, but take just as much space as it needs while the rest of the site remains fully visible – I’ve seen this in some themes, any idea how to achieve it?

    4) there is a visible line with the page background under the heading (most likely due to the overall padding defined for the website – is there a better way to set it to 0 for just the space under the heading, rather than setting everything else to zero and then increasing for all elements individually?

    5) I have a separate menu in the Footer, and then one line of text under it. If I activate the switch to the hamburger button for smaller resolutions, can I make it so that it goes under the line of text, even though the menu items are above the line of text on desktops?

Viewing 1 replies (of 1 total)
  • Moderator Jan Mc Kell

    (@janmtm)

    Hi @wordzebra !

    For number 1: Since your Header is built with Blocks, you can easily rearrange elements using the Editor at Appearance → Editor. To achieve the desired layout, move the Row containing your Site Logo and Site Title to the last spot in the Header. Then, convert the Row Block to a Column Block, allowing you to use percentages to control the width of each nested Block (Site Logo and Site Title). Percentages are a responsive way to ensure consistent spacing across different screen sizes, whereas pixel-based widths remain static across all devices.

    For number 2: You can style your menu’s background color directly in the Block settings for the Navigation Block. However, this will apply to all devices. To specify a different background color or style for mobile only, you’ll need to use custom CSS. Read more about styling via custom CSS, at this resource.

    For number 3: There isn’t a native way to accomplish this, so you’ll need to adjust it using custom CSS. To locate the necessary submenu classes, use the Web Developer Console in your browser.

    For number 4: Could you provide more details or a screenshot of what you’re experiencing, along with what you’ve tried so far? This will help in providing a more targeted solution.

    For number 5: This type of customization isn’t available by default, so you’ll need to use CSS to style the relevant Blocks (Header, Navigation, Footer, and the Navigation Block within the Footer).

    I hope this helps!

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.