- This topic has 19 replies, 1 voice, and was last updated 3 years, 5 months ago by
ch1800.
-
AuthorPosts
-
April 6, 2020 at 5:08 am #1228317
ch1800
Is it possible to add this PHP shortcode to the header, below navigation, at bottom corner, without having to create a child theme and changing header template:
<div align=right><?php echo do_shortcode('[google-translator]'); ?> </div>This was at previous website I’m migrating, in child themes header template and was displaying that way:
https://cloudup.com/cTJ3ecHxzMNApril 6, 2020 at 6:04 am #1228362David
StaffCustomer SupportHi there,
you can use a Hook Element, and select the
after_header_contenthookhttps://docs.generatepress.com/article/hooks-element-overview/
April 6, 2020 at 8:05 am #1228650ch1800
I’ve added this hook and works fine on desktop but disappears on mobile when menu becomes hamburger…
Any way to keep alive on mobiles?April 6, 2020 at 8:13 am #1228669David
StaffCustomer SupportOptions:
1. Disable the Mobile Header
or
2. create another Hook and with the same code and select the
inside_mobile_headerhookApril 6, 2020 at 8:36 am #1228697ch1800
The first option is too messy but the second, currently active, doesn’t seem to work.
April 6, 2020 at 4:15 pm #1229150David
StaffCustomer SupportAdd this CSS:
.main-navigation #flags ul { display: block; }Although those icons may be a little small for mobile devices.
You may want to add the Shortcode to the Off Canvas Widget area instead to make them more accessible.April 6, 2020 at 6:33 pm #1229222ch1800
That works now and it’s not bad.
I prefer having them here instead of the Off Canvas as it’s simpler to use.But the placement is a bit odd at top left and don’t well understand why the logo centers as this was already the case before when I increased it size.
I tried to better align those elements for small screens but failed miserably…
How would I align them all that way?
Logo: top left
Hamburger: top right
Flags: bottom rightApril 7, 2020 at 2:41 am #1229545David
StaffCustomer SupportLooks like you made some changes to desktop as well?
If you can disable the autoptimize, and look for any CSS thats affecting the navigation layout in Customizer > Additional CSS then we can look at whats required for desktop and mobile.
April 7, 2020 at 7:13 am #1229799ch1800
No, I don’t think I made any other changes in there, except those related to the slider as per
https://generatepress.com/forums/topic/catalyst-adding-sliding-slogans-at-homepage-header/#post-1228357and the separation of the containers as per
https://generatepress.com/forums/topic/containers-for-posts-pages-and-widgets/and added this for the logo height according to another thread:
/* mobile logo height */ .mobile-header-navigation .site-logo.mobile-header-logo img { height: 120px; margin-top: 40px; }I don’t run Autoptimize at this site, so I don’t well understand to what you are referring to exactly. Maybe Asset Cleanup? I just cleared all caches there.
I see I also commented this out… but forgot what for:
/* body.single .site.grid-container { max-width: 1000px; } */April 8, 2020 at 1:38 am #1230857David
StaffCustomer SupportCan you disable whatever cache / optimization plugins you’re using ? Then i can see where the CSS affecting the positioning is coming from.
Also in your HTML can you remove:
align=rightfrom the mobile hook.April 8, 2020 at 2:20 am #1230913ch1800
There was only Asset Cleanup and Flying Pages activated and I just de-activated them both.
Fastest Cache was active but not enabled but I just also de-activated it.There is nothing else of this kind at this temporary URL.
April 8, 2020 at 3:35 am #1230994David
StaffCustomer SupportThanks
The HTML for your Flags in the Mobile Header can you change it to:
<div class="mobile-translate"><?php echo do_shortcode('[google-translator]'); ?> </div>Then i can provide the CSS to position it.
April 8, 2020 at 3:46 am #1231006ch1800
Thanks David – done.
April 8, 2020 at 4:00 am #1231022David
StaffCustomer SupportTry this CSS:
.mobile-translate { order: 4; width: auto; flex: 1 0 calc(100% - 20px); margin-right: 20px; } .main-navigation #flags { width: 100%; } .main-navigation #flags ul { float: right !important; }In your Header Element you need to add some more top padding for mobile – this will stop the hero text from hitting the navigation elements.
April 8, 2020 at 5:33 am #1231097ch1800
That’s really great and works just fine, many thanks David and sorry if I asked too much.
I really appreciate your patience and knowledge.I’ll play around a bit with those settings and I’ll be ready soon to move back to the original URL and replace the old site.
I have only 2 interrogations left that are really secondary.
I understand that this might be out of the scope of your support, in that case just ignore them, but I’m really unable to find the solution after testing dozens of variants…1. In order to get post categories on top of pages, right before the post’s date, I’ve added this snippets that you suggested and that works just fine:
add_filter( 'generate_header_entry_meta_items', function( $items ) { if ( is_single() ) { $items = array( 'categories', 'date', ); } return $items; } );The only thing is that it is not clear what “internet” means right in front of a date and I would like to add a plain text prefix, like “category: Internet” and then “publication date: xxx”.
I really cannot find a way for adding plain text in there and, believe me, I searched…2. The only layout trick I miss from the previous site (you still have the link inside the slider) is this orange line (class=”line”) that shows below widget titles, at homepage and sidebar:
https://cloudup.com/cPJdZWxmjuyIs something similar possible to implement here with CSS or is it more complex than that?
Thanks again.
-
AuthorPosts
- You must be logged in to reply to this topic.