I recognize a funny behavior when resizing my desktop browser. At a certain width, sticky header stops resizing and leaves white space to the right. When I choose another menu point, it is fully displayed. However, if I continue resizing the page, sticky header stops again resizing itself properly.
I don’t use legacy mode, but if I use it, sticky header resizes without any issues. Legacy mode, however, has an issue with my side bar, so I don’t like to finally switch to it.
Has anyone come across this and found a solution?
Thnx and best regards
Klaus
I have set the header to “content width” which moved the content in, but the background is still wider than the page section. I am using a responsive section for the page content but it only seems to have the option to set the width at a specific number of pixels.
I know I can empty the header and put that content in the page container, but I need the menu to switch to the hamburger for mobile/small screens.
]]>Is it a proper way to do it to simply reduce the padding in the .site-main and .site-header classes? Or could it bring responsiveness issues later?
And could the space between the logo and the menu, (which seems to be a margin from the menu?) be used for a title? How could I use it for site title or description?
]]>I just have to test the transparency of the header now with something like Kadence Blocks to see if the content is hidden from the transparent menu area.
I mainly downloaded this plugin as I wanted to change the 3 dots hamburger icon to a regular 3 horizontal line hamburger menu maybe with a colored box around it. At first I couldn’t change the icon or colors but the developer quickly updated the code so there was a choice. The colors can’t be set yet but you can do it with code. It’s great that this hamburger setting was added as other plugins like Twenty Twenty Customization – Twentig have basic hamburger menu settings like this. Maybe animated hamburger icons would be cool later on.
The developer added the new hamburger setting in less than 24 hours and also fixed the header so it could resize the content area. Thank you so much for that.
I’m happy to change my rating to 5 stars when there are a few hamburger options. I think you have made almost all the other basic setting that a plugin like this needs.
I recommend this plugin if you are just looking for something that can easily change the default WordPress template Twenty Twenty.
]]>I have a site set up using GeneratePress at https://ticketymarketing.com/dogblog1/ where the header is the full width (the same width as the menu bar). I have a similar site at https://ticketymarketing.com/weightlossforwomen/ which has exactly the same settings (as far as I can see) but the header is not displaying as full width. How do i fix this so that it displays as full width as well?
Thanks,
Val Wilson
]]>First Layout: Perfect
Second Layout: Forms 2 rows of the menu headers and doesn’t look great in my opinion.
Third Layout: Still a transparent background, but with the 3 line tab on the right to bring the menu down. Probably not needed due to layout 4
Fourth Layout: Non-transparent background with the 3 line tab on the right to bring the menu down. Good design.
My question: Is there a way to have only two different menu layouts? I would like to utilize “First Layout” for screen widths capable and then go down to “Fourth Layout” when the screen width is smaller.
Let me know and thank you for your time.
]]><!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php if (is_singular() && pings_open(get_queried_object())) : ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php endif; ?>
<?php wp_head(); ?>
</head>
<body id="mh-mobile" <?php body_class(); ?> itemscope="itemscope" itemtype="https://schema.org/WebPage">
<?php mh_before_header();
get_template_part('content', 'header');
mh_after_header(); ?>Nice theme, how can I change the header width?
]]>