Avada Forums Community Forum How to add an icon next to the mobile burger menu?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • M0ffat1
    Participant
    Post count: 4

    How to add an icon next to the mobile burger menu for change lang?

    marklchaves
    Participant
    Post count: 873

    Hi @m0ffat1,

    I thought about doing this too. I tried some options: adding an after psuedo class to the mobile icon (displayed but couldn’t separate the link from the icon’s link), adding a filter on the wp nav php code (too much php for me), and creating a fixed top bar with a button (too much of a hack when Header 4 will do almost the same thing).

    I found only one hit on the WordPress.org forums https://wordpress.org/support/topic/excluding-item-from-hamburger-menu/

    My next plan is to try Header 4 https://theme-fusion.com/documentation/avada/header/header-layouts/.

    Here’s the demo https://avada.theme-fusion.com/church/

    I’ll keep you posted.

    M0ffat1
    Participant
    Post count: 4

    Thanks for the answer, if there are any changes and solutions, I will be grateful if you answer!

    marklchaves
    Participant
    Post count: 873

    Hello @m0ffat1,

    I tried Header 4. It worked great for mobile view. But, I didn’t like the formatting for desktop (DT). It kinda cut in half my hero banner in the header for the DT view. I would have had to mess around with too many custom alignment settings.

    I went back to a PHP/CSS solution. I ended up liking it the best. It ended up being pretty minimal because Avada provides a header hook (https://theme-fusion.com/documentation/avada/avada-for-developers/avada-hooks-actions-and-filters/).

    I hope you are comfortable with PHP and CSS. Here’s the code.

    Add to your child theme’s functions.php file.

    
    // PHP to Resist the Hamburger
    
    add_action( 'avada_header','add_test_link' );
    function add_test_link() {
            // Change the HTML in single quotes to what you want. 
    	echo '<div class="no-hamburger"><a href="#">test</a></div>';
    }
    
    

    Add this to your global custom CSS.

    
    /* CSS for the Resistance */
    
    @media only screen and (max-width: 1024.998px) {
        /* CSS Block Positioning */
        .no-hamburger {
            float: right; /* Displays to the right of the hamburger. */
            margin-top: 2.75rem; /* Line up vertically with the hamburger. */
            padding-left: 0.5em; /* Make some space. */
            padding-right: 0.5em;
        }
    }
    
    @media only screen and (min-width: 1025px) {
        .no-hamburger {
    	    display: none;
        }
    }
    
    

    If you need the link/icon to the left of the hamburger, replace the block positioning code with this. But, it might overlap your logo on small devices if you have a rather wide logo.

    
    /* Change top and right as needed. */
    .no-hamburger {
            /* CSS Absolute Positioning */
    	position: absolute;
    	top: 2.75rem;
    	right: 6rem;
    }
    
    
    M0ffat1
    Participant
    Post count: 4

    Hello

    Thank you very much for the answer. But unfortunately it didn’t work for me. Only burger icon is moving.

    M0ffat1
    Participant
    Post count: 4

    I’m writing because, I found a div element on the page but it is hidden with a header.

    marklchaves
    Participant
    Post count: 873

    Hello @m0ffat1,

    I’d need to see your code to figure out what’s going on. Otherwise, I would be speculating. Every page will be different, therefore tweaking will be required for each implementation of the code snippets above (standard integration practice for software dev).

    For example, the first Block positioning CSS worked perfectly for my client’s site (still a private site in dev). But, the Block positioning did not work well for my own personal site. However, the Absolute positioning works like a charm for my personal site (helps to have a small logo). I just had to adjust the topattribute to 1.8rem.

    Here’s the live demo on my site. Use your Firefox or Chrome dev tool to switch to a mobile viewport (or use your phone). You will see an “about” link on the left hand side of the hamburger (only for this page).

    https://marklchaves.com/itsonlyrockandroll/

    dccs52
    Participant
    Post count: 3

    @marklchaves

    This works perfectly, however if the sticky header is enabled, it disappears as soon as the user scrolls, is there any hook to address this in the sticky header?

    Worth mentioning that i am using the flyout menu option

    marklchaves
    Participant
    Post count: 873

    Hello @@dccs52,

    Thanks for posting.

    The only Avada hook I know that persists on for the sticky header is the avada_logo_append. You can have a look at the docs yourself in case I missed one.

    https://theme-fusion.com/documentation/avada/avada-for-developers/avada-hooks-actions-and-filters/

    If you go with this filter, you should be able to use it to get what you want into the sticky header first. Then once it’s there (and, if you’re CSS savvy), it will be an exercise for you to use CSS to hide it on the regular header and position it where you want on the sticky header.

    I hope that makes sense.

    Good luck!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.