Text in menu header on smaller displays / mobile

[solarwoods]

On smaller displays when the hamburger menu is displayed, I’d like to put some text in the white area between my logo that is on the left and the hamburger menu that is on the right. Can that be done?

[Prasant]

Hello @solarwoods,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-brand:after {
    content: "Read this:";
    font-size: 20px;
    margin-left: 45px;
}
}

Replace Read This text as per your requirement.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.