Avada Forums Community Forum Add text in between logo and mobile menu?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • william.baxter
    Participant
    Post count: 9

    Hi,

    I’m looking to achieve the below functionality:

    https://imgur.com/8ecXPse

    I found the following CSS, it gives me similar functionality but not exactly what I need. The problem with the following is it the text after the menu and acts as a link as part of the menu. Using ::before also doesn’t produce a result.

    I need it to be seperate text that I can add a link to.

    .fusion-icon-bars::after {
    content: “Menu”;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.1em;
    padding-left: 10px;
    position: relative;
    }

    Any help would be great 🙂

    Thanks

    marklchaves
    Participant
    Post count: 873

    Hi Will,

    You’re very close. There’s already a .fusion-con-bars::before rule for the hamburger icon. So, we’ll need to piggyback on it.

    Here’s what I came up with.

    
    .fusion-icon-bars::before {
        content: "Menu \f0c9"; /* Add text before hamburger icon. */
        text-transform: uppercase;
        font-size: 1.1em;
    }
    

    Screen grab.

    https://imgur.com/a/rGDkYqU

    william.baxter
    Participant
    Post count: 9

    Hi Mark,

    Unsure why, but for me that isn’t producing a result…strange.

    ::after seems to work, but not before. Weird.

    Also, wouldn’t this link to the menu link anyway? I’m looking for something completely independent that would have a href behind it.

    I essentially want to re-create the headline header (https://avada.theme-fusion.com/wp-content/uploads/2019/07/header-header-4.png) but without having to use that header style as I hate the nav bar it generates 🙁

    Thanks,
    Will

    marklchaves
    Participant
    Post count: 873

    Hi Will,

    I forgot to always caveat custom CSS with, “Add !important; if you don’t see the results right away.” E.g.

    
    .fusion-icon-bars::before {
        content: "Menu \f0c9" !important; /* Add text before hamburger icon. */
        text-transform: uppercase;
        font-size: 1.1em;
    }
    

    OK, if you need to get some custom HTML in the primary header, here’s one way to do it. Spoiler alert–it ain’t pretty.

    Here, I’m using an Avada hook to append text below the logo. But, for the span, I’ll use CSS with absolute positioning to put any kind of text wherever I want.

    
    /**
     * PHP - Put in your child theme's functions.php file.
     *
     * Use an Avada Hook to Add Text Under the Logo
     * 
     * To put the span "voices" in the centre of the header instead
     * of underneath the logo, you would need tHIS CSS.
     * 
     * #voices {
     *   position: absolute;
     *   bottom: 50%;
     *   left: 50%;
     *   margin-right: -50%;
     *   transform: translate(-50%, -50%);
     * }
     */
    function my_logo_text() {
    	echo "<span id='voices'><a href='https://caughtmyeye.dev'>Voices Carry</a></span>";
    	echo "<h3>Some Text Under the Logo</h3>";
    }
    add_filter( 'avada_logo_append', 'my_logo_text' );
    
    
    /** 
     * CSS - Put in your child theme's style.css file. 
     */
    #voices {
        position: absolute;
        bottom: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
    
    william.baxter
    Participant
    Post count: 9

    Thanks again, Mark. Much appreciated.

    I’ll give you a shout if I have any issues 🙂

    Randy355
    Participant
    Post count: 1

    Hi! didn´t work for me still working on a solution so that I can add the text “Menu” before the hamburger Icon. Im using the header layout 6.

    marklchaves
    Participant
    Post count: 873

    Hi @randy355,

    Yup, layout 6 is a little unique. Please try this.

    
    /* Change to ::before if no search icon. */
    .fusion-flyout-menu-icons::after {
        content: "Menu" !important; /* Add text after hamburger icon. */
        text-transform: uppercase; /* Changed as needed. */
        font-size: 1em; /* Tweak as needed. */
    }
    

    Screengrab https://imgur.com/a/AEqXTvA

    Thanks!

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