Archived topic
wider header widget
15 replies · Started by Matt on March 23, 2016
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
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 :)
Thanks
That worked a treat
On mobile the widget is almost right of the screen and you can only read first letter, is that a simple fix.
Can I just turn the header widget off on mobile?
I have this but not working
@media (max-width: 768px) {
.header-widget {
display:none;
}
That should work - can you link me to your site?
Hey Tom
Don't worry I think its my iphone or something with the cache, it works on android.
Thanks
Matt
Awesome :)
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
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 :)
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
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
ok figured out the iPhone problem, but not the menu
Did you make the changes I mentioned here?: https://generatepress.com/forums/topic/wider-header-widget/#post-181678
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
