仅在移动布局上添加文本

Question

Here is my website's mobile version I want to add small text 'MENU' here

When I try to add here it is visible in desktop version too.

<div id="responsive-menu-container">
            <span class="menu">MENU</span>
            </div>

How to add this text in mobile version only? Or maybe not the code, but the way I try to add is incorrect?

Answer 1

You can hide or show it with @media tags with css. Like this:

Your normal css class:

.menu{
   display:none;
}

Your mobile version class:

@media only screen and (max-width: 767px) {
    .menu{
       display:block;
    }
}

After that by using your example, you have to put "menu" span inside your "responsive-menu-container". After adding it, you can adjust its position.

<div id="responsive-menu-container">
   <span class="menu">MENU</span> 
</div>

Edit for position:absolute :

If you are using a reference library for menu bar and creating this content with automatically, you can also use position:absolute for .menu class. Like this:

@media only screen and (max-width: 767px)
.menu {
    display:block;
    position: absolute;
    z-index: 9999999; /* I gave this value because your menu bar's z-index must be smaller than this. */
    margin-top: 15px;
    margin-left: 15px;
}