Add text in between logo and mobile menu?

[william.baxter]

#696164

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]

#696518

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]

#696736

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]

#696866

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]

#697239

Thanks again, Mark. Much appreciated.

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

[Randy355]

#786100

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]

#787324

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!

[Author]

Posts