-
Hi there,
we have implemented a secondary menu and used this code for it in the functions.php on this page https://shop.vanderer.be/afspraak-boeken/ (where it’s displayed correct:
add_filter( 'wp_nav_menu_args', function ( $args ) { if ( 'primary' === $args['theme_location'] && is_page( array( 2265, 6596 ) ) ){ $args['menu'] = 248; //replace 10 with the actual menu ID } return $args; } );i added another page (
page id 6596– https://shop.vanderer.be/motorhome-salon/) which should also display the secondary navbar in the same format (not uppercase, no shoppingcart.)
Also there is a top-margin on that page which i cannot get rid off.Could you please check? Thank you 🙂
-
Hello. I am not seeing the secondary menu in the first link you’ve provided, am I missing something?
Amelia seems to be adding the top margin on the page. Try adding this CSS:
#amelia-v2-booking-1000 .amelia-v2-booking #amelia-container.am-fs__wrapper { margin: 0 auto; } -
Hi George,
i can see it: that’s the correct one https://imgur.com/FYDg7aY on this page: https://shop.vanderer.be/afspraak-boeken/
and here not correct one: https://imgur.com/GR4reAA – on this page https://shop.vanderer.be/motorhome-salon/Is it really Amelia because on the Amelia Page it is correctly displayed but on the event page not: https://imgur.com/vyU42y3
-
The secondary menu is being displayed in both page. You have some CSS that affects the menu typography on page
2265..page-id-2265 .main-navigation a, .page-id-2265 .main-navigation li { text-transform: none !important; letter-spacing: none !important; }Regarding the screenshot you sent for Amelia, I don’t see any instances of the Amelia embed in there. Did you try the CSS I sent you?
-
I tried to correct it but it’s not working. i only see a blank page. i tried this:
/* Organise sub-items navbar */ body.page-id-2265 .main-navigation.sub-menu-left .sub-menu, body.page-id-6596 .main-navigation.sub-menu-left .sub-menu { right: auto !important; left: 0 !important; width: 200px !important; } /* Hide search and account icons */ body.page-id-6596, body.page-id-2265 .menu-bar-items { display: none !important; } /* Force menu items to normal case (not uppercase) */ body.page-id-2265 .main-navigation a, body.page-id-2265 .main-navigation li, body.page-id-6596 .main-navigation a, body.page-id-6596 .main-navigation li { text-transform: none !important; letter-spacing: normal !important; }I am confused: Amelia is not embedded on the Motorhome Salon-page that’s why Amelia can’t be the reason that there’s a margin, no? On the other page where Amelia is embedded the menu/navbar is correct. So the navbar of the motorhome Salon-page needs to be like the navbar on the booking-page.
-
I am sorry, I am confused now too. What is the problem on the homepage URL that you have just provided? Could we maybe tackle one thing at a time?
-
yes, of course.
1. page: So here: https://shop.vanderer.be/afspraak-boeken/ that’s the correct menu how it should look like (there’s Amelia embedded)
2. page: And here https://shop.vanderer.be/motorhome-salon/ that’s the new page where Amelia is not embedded and the navbar is uppercase and the icons from the shop are visible. i want to change this so it looks exactly like the first page.
I hope this helps.
-
Ok, this is not the right approach, to be honest. The main primary menu and the secondary one you are adding, are actually the exact same menu, correct? You could just use one primary menu and apply CSS only for the those pages needed. The icons at the top right are being inserted through an Element. You could add exclude conditions to not display the element to certain pages.
This CSS here is trying to do the same thing with the element exclusion I just described but it’s wrong:
body.page-id-6596, body.page-id-2265 .menu-bar-items { display: none !important; }It should be:
body.page-id-6596 .menu-bar-items, body.page-id-2265 .menu-bar-items { display: none !important; }I would suggest to remove the CSS you just provided and just use one primary menu. Remove the PHP code for the secondary menu. Keep things simple. Let me know once you do that, and we can take it from there!
-
I feel i have to explain a bit further: we have the main domain
vanderer.beand the shop-subdomainshop.vanderer.be. we need two pages of the shop-subdomain shop.vanderer.be with the primary menu of the main page vanderer.be to make them look like the user is on the main domain still. so i wanted to add via php and menu-id the primary menu from the main domain on those two pages.
The shop-menu looks completely different. Maybe my whole setup is not good then? Those two pages have to be on the subdomain because they either are used for (paid) bookings and therefore have to be on the shop-domain to use the payment-provider from the shop.And only on the new page which i added today (Motorhome Salon) i don’t get the extra CSS to work.
Does that make it clearer or it doesn’t matter at all? 🙂
-
Try changing your CSS to this:
body .main-navigation .main-nav ul#menu-secondary-menu a { text-transform: none !important; letter-spacing: 0 !important; } body .main-navigation:has(ul#menu-secondary-menu) .menu-bar-items { display: none; } body .main-navigation:has(ul#menu-secondary-menu) .sub-menu { right: auto !important; left: 0 !important; width: 200px !important; } -
Hi Ying,
Thanks, that’s fine on desktop. Only the button in the Hero section doesn’t work; the button is not clickable. I’ve deleted the ::before-selector and then it works.
-
Glad to hear that 🙂
-
I just forgot one thing: how can i get rid of the margin below the navbar which you can see here: https://imgur.com/vyU42y3
it appears on desktop and mobile. -
It looks like you are using CSS to hide the h1 title on the page, that’s why it has extra spacing on the top.
Can you remove the CSS from your child theme, and use a layout element to remove the title?
-
Yep, that did it. Thanks Ying 🙂
-
No Problem 🙂
- You must be logged in to reply to this topic.