-
Posts
-
Hi Team,
I hope you are well.
I’m just wanting to see if I can change the mobile burger layout on my website please. I’ve got the colours and sizing right, but I’m wanting to perhaps unbold the second and third layers and to also see if I can turn the arrow into a cross so it is more consistent with the accordion style of my site. Plus the arrow is a little hard to see that there’s the next layer as it’s fairly small.
Also, how do you create a link in the top bar on the home page say for my email address and phone number so it’s easy for people to go through and phone and email?
Also, how can I change the breadcrumb current page to a highlight colour so you know what active page you are on please? I sued some code I found on Google, but it kind of broken my theme.
My website is http://www.peakpotential.net.au
Thanks in advance.
Cheers
DarrenHey Darren,
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHi Victoria,
Thanks for getting back to me.
I have created a page on our website for any mockup images.
https://www.peakpotential.net.au/website-mockup/
With the burger, I was hoping to change the arrow indicating another submenu with a cross. The cross seems standard for the accordion style submenu indicating more levels. I was hoping to also change the blue submenus from bold to normal weight, so just leaving the main menu heading as bold.
The phone of the main home page, I was hoping to have the contact details as easy links that go to email and go to the phone call if pressed on a mobile etc. So I guess just usable links instead of static contact information.
Just let me know if you need more mockups as I can just add them to that page.
Cheers,
DarrenHi,
Thank you for the update.
1.) Use this css code to change the sub menu indicator icon.
.html_av-submenu-hidden .av-submenu-indicator:before { content: "+"; }2.) Set the font weight of the phone info from 700 to 400.
.phone-info { font-weight: 400; }3.) You can manually add a hyperlink tag in the phone field.
// https://www.w3schools.com/tags/tag_a.asp
If you want to trigger a phone call, add the tel scheme in the href attribute value.
<a href="tel:555-555-5555">555-555-5555</a>Best regards,
IsmaelHi Ismael,
I tried this code in the CSS general styling and it didn’t seem to change the icon to a + to indicate a further menue item
.html_av-submenu-hidden .av-submenu-indicator:before {
content: “+”;
}
Cheers
DarrenHi Darren,
You are adding some illegal css there.
Can you disable caching and minification for now?
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi Victoria,
Sorry for the delay but I just got home for an adventure for the past week.
Sure, I can do that.
That’s the code Ismael provided a bit further up in the thread.
I’ve taken that code out of the CSS general styling section.
Do you still require access to have a look or will provide new code?
Warmest regards,
DarrenHi Victoria,
Please find attached the login credentials below.
So basically looking to change the burger menu to have a + as a dropdown indicator than the >
Warmest regards,
DarrenHi Darren,
I added the plus for you, please check.
What else is not done yet?
Best regards,
VictoriaThat’s great thanks Victoria.
I’m just wonder if if it’s easy to increase the size of the + sign so it’s little bid more visual, please? I made a few changes so some of the other changes I ditched. Just trying to make our site more mobile-friendly as a large part of our traffic is now mobile. I’ve used a plus sign to indicate the third level for our range of adventures, but should I use another symbol or indicator as I guess the plus means another level.
Warmest regards,
Darren
Hi Victoria,
I changed the adventure third level indicator to > which I think looks better. I guess I could put an icon there, but I think that looks okay for now. If I could increase the size of the + indicator on the mobile burger menu that would be awesome.
Cheers
DarrenHi,
Thank you for the update.
You can use this css code to adjust the size of the indicator or the plus icon.
.html_av-submenu-hidden li a .av-submenu-indicator { font-size: 30px; }Please don’t forget to toggle the Performance > File Compression settings if it’s enabled.
Best regards,
IsmaelSorry, Ismael, do you mean turn off WP Rocket before adding the code as well as compression in C Panel? or just WP Rocket?
Cheers
DarrenHi Ismael, I worked out the performance you were talking about in the theme options and turned them off, but when I added the code the plus sign only became large when the level was toggled, not large before the toggle.
Hi,
Sorry about that. We adjusted the code a bit. Please try it again.
Thank you for the update.
Best regards,
IsmaelSorry Ismael, I currently have this CSS code in the quick add.
.html_av-submenu-hidden li a .av-submenu-indicator {
font-size: 20px;
}Did I need to make a change to this code to have the + sign larger on the right hand side of the menu before the sub menu activation just so the indicators stand out a bit more?
We will now be using the burger menu across our whole site now including destop.
Website is: Peak Potential Adventures
Warmest regards,
Darren
Hi,
Thank you for the update.
You have to replace it with the css code above. Here it is:
.html_av-submenu-hidden li a .av-submenu-indicator { font-size: 30px; }Best regards,
IsmaelThanks, Ismael, my confusion that you changed the old post CSS code to the new.
Worked perfectly… thank you.
Cheers
Darren
- The topic ‘Changing the mobile buger menu’ is closed to new replies.