Main page – Insert text instead of "3 bars icon" for the menu

Hi Benjamin,

You can change those three lines using some custom CSS.

As you have Jetpack active, an easy way to add CSS is to activate its custom CSS module and then navigate to Appearance > Edit CSS in your admin area. (Alternatively, you can set up a child theme or activate a standalone CSS plugin.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

.sidebar-toggle {
    width: 100px;
}

.sidebar-toggle:before {
    content: "Submit your Jetlag";
    width: 100px;
}

You can replace the value of content with any text that you wish to.

Let me know how that goes or if any questions come up.

Hi Siobhan,
Thanks a lot, it works well!
How can I manage to make it responsive?
Cheers,
Benjamin

Hi Benjamin,

Firstly: I just noticed some styling issues with the icon when it’s clicked on. Apologies for not noticing that earlier! You can style the icon when it’s clicked on using the following snippet:

.sidebar-toggle.toggle-on:before {
    content: "Envoie ton Jetlag";
    font-size: 16px;
    width: 200px;
}

How can I manage to make it responsive?

I reduced my browser’s window to view your site across a few different widths and the icon seems accessible/presentable across all of them.

I can see that it drops down below your logo and to the right hand side of the screen on devices that are 673px or smaller. If you’d like to style it on devices of that width or smaller then you can make use of CSS media queries.

Some good introductions on what media queries are and how to use them can be found in the following guides:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

As an example, the following CSS contains a media query to target devices that are 673px or less. It will move the icon to the left of the screen and hide the border from its left side. In addition, it will move the menu panel lower down the page so that the icon is still visible when clicked on:

@media screen and (max-width: 673px) {
    .sidebar-toggle {
        float: left;
        border: none;
    }

    .sidebar-open .sidebar {
        margin-top: 78px;
    }
}

Let me know if that’s helpful! If any questions come up, then I’m right here too.

Thanks! It’s much better and explanations are super clear.

One last thing: can I change the font?
I’d my text to use the same font (Lobster). I used the following code but it only works on my computer:

.sidebar-toggle {
	width: 200px;
}

.sidebar-toggle:before {
	font-family: 'Lobster 1.4', sans-serif;
	font-weight: normal;
	content: "Envoie ton Jetlag";
	width: 200px;
}

.sidebar-toggle.toggle-on:before {
	content: "Envoie ton Jetlag";
	font-size: 16px;
	width: 200px;
}

On my cell’ screen or any other laptop I see it in Arial.
Thanks, have a nice weekend.
Benjamin

Hi Benjamin,

I took the following screenshot of what your site’s header looks like on my computer. Can you check it and let me know if the “Lobster” font is displaying in the upper right?

The “Lobster” font may be downloaded to your computer and therefore displaying for you but, if it’s not actually loaded with your theme, it won’t display anywhere else.

I found the following article which has some good tips for uploading a custom font to your theme:

https://premium.wpmudev.org/blog/custom-fonts-css/

Let me know if that’s helpful or if you have any extra questions.