Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #1118417

    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
    Darren

    • This topic was modified 4 months, 3 weeks ago by  darrenwise.
    #1118537

    Hey Darren,

    Could you please attach a mockup of what you’re trying to achieve?

    Best regards,
    Victoria

    #1118651

    Hi 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,
    Darren

    #1118975

    Hi,

    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>
    

    // https://stackoverflow.com/questions/1608548/how-to-trigger-a-phone-call-when-clicking-a-link-in-a-web-page-on-mobile-phone

    Best regards,
    Ismael

    #1120555

    Hi 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
    Darren

    #1120608

    Hi Darren,

    Screen Shot 2019-07-21 at 13.55.36.jpg

    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,
    Victoria

    #1122297

    Hi 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,
    Darren

    #1122387

    Hi darrenwise,

    Yes, please share credentials in private.

    Best regards,
    Victoria

    #1122990

    Hi 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,
    Darren

    #1122991

    Hi Victoria,
    I made that page mockup private as well.
    Cheers,
    Darren

    #1123216

    Hi Darren,

    I added the plus for you, please check.

    What else is not done yet?

    Best regards,
    Victoria

    #1123315

    That’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

    #1123320

    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
    Darren

    #1123829

    Hi,

    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,
    Ismael

    #1123837

    Sorry, Ismael, do you mean turn off WP Rocket before adding the code as well as compression in C Panel? or just WP Rocket?
    Cheers
    Darren

    #1123847

    Hi 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.

    #1124615

    Hi,

    Sorry about that. We adjusted the code a bit. Please try it again.

    Thank you for the update.

    Best regards,
    Ismael

    #1124621

    Sorry 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

    #1124753

    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,
    Ismael

    #1124914

    Thanks, Ismael, my confusion that you changed the old post CSS code to the new.

    Worked perfectly… thank you.

    Cheers

    Darren

    #1124954

    Hi,

    Great! Glad it worked. Please don’t hesitate to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Changing the mobile buger menu’ is closed to new replies.