wider header widget

[Matt]

Hi Tom
I have a site m building that only has a small header image. I want to add more text up next to it but can’t make the header widget wider. I tried a few things but can’t only make it wide enough to meet the header image.
Thanks
Matt

[Tom]

Hi there,

You can adjust the header widget width with this CSS:

.header-widget {
    max-width: 50%;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Let me know if you need more info 🙂

[Matt]

Thanks
That worked a treat

[Matt]

On mobile the widget is almost right of the screen and you can only read first letter, is that a simple fix.

[Matt]

Can I just turn the header widget off on mobile?
I have this but not working

@media (max-width: 768px) {
.header-widget {
display:none;
}

[Tom]

That should work – can you link me to your site?

[Matt]

Hey Tom
Don’t worry I think its my iphone or something with the cache, it works on android.
Thanks
Matt

[Tom]

Awesome 🙂

[Matt]

One more thing is there a way to make menu on mobile open by default and in two columns side by side.
I have a picture menu and they are all circle shaped, I want if possible to have all 6 of them stacked 3 high 2 wide.
Hope that makes sense
Thanks
Matt

[Tom]

Hi there,

This should open the mobile menu by default: https://gist.github.com/generatepress/d50527e008498000e680

Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

You might be able to put them in two columns like this:

@media(max-width: 768px) {
    .toggled .main-nav .sf-menu > li {
        float: left !important;
        width: 50%;
        clear: none;
    }
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

Hope this helps 🙂

• This reply was modified 8 years ago by Tom.
• This reply was modified 8 years ago by Tom.

[Matt]

Hey Tom
add_filter( ‘generate_navigation_class’, ‘generate_mobile_menu_toggled’);
function generate_mobile_menu_toggled( $classes )
{
$classes[] = ‘toggled’;
return $classes;
}
Cant get the menu to open by default dose that code just go in custom css?

And
.toggled .main-nav .sf-menu > li {
float: left;
width: 50%;
clear: none;
}
gets it to float left but not in two columns.
Here is link to site http://91b.96d.myftpupload.com/ if that helps
Also header widget is still showing up on my iPhone , not sure if its my phone or what any ideas
Thanks heaps
Matt

[Tom]

That first block of code is PHP, so it needs to be added using these instructions: https://generatepress.com/knowledgebase/adding-php-functions/

For the CSS, try the updated code above: https://generatepress.com/forums/topic/wider-header-widget/#post-181463

[Matt]

ok figured out the iPhone problem, but not the menu

[Tom]

Did you make the changes I mentioned here?: https://generatepress.com/forums/topic/wider-header-widget/#post-181678

[Matt]

Sorry yes done all that, they now sit side by side (very nice)
But cant get them to open by default
I installed plugin generate-simple-php/custom.php and added code there but still no luck.
Unfortunately I am using godaddy to use and edit wordpress (never again). Do you think that could be the problem? It was the reason my iPhone was being cached

[Author]

Posts