Mobile Menu Text

Resolved

(@soykatorce)

Hi All,

I’m using a child theme of Hueman v 3.3.7 and want to add a title to the header-nav-topbar.

The core code is:

<nav class="nav-container group" id="nav-topbar">
  <div class="nav-toggle"><i class="fa fa-bars"></i></div>
  <div class="nav-text"><!-- put your mobile menu text here --></div>
  <div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

  <div class="container">
    <div class="container-inner">
      <div class="toggle-search"><i class="fa fa-search"></i></div>
      <div class="search-expand">
        <div class="search-expand-inner">
          <?php get_search_form(); ?>
        </div>
      </div>
    </div><!--/.container-inner-->
  </div><!--/.container-->

</nav><!--/#nav-topbar-->

I tried the following filter function in the child theme


// Change top bar nav title
add_filter( 'nav_text', 'my_nav_text', 10 );
function change_top_bar_nav_text($content) {
  return 'ANNETTE CHARDON PRODUCCIONES';
}

but it did not work. What am I doing wrong?
Thank you all in advance – Dario

This topic was modified 9 years ago by Darío Orlando Fernández.

Viewing 3 replies - 1 through 3 (of 3 total)

Giorgio25b
(@giorgio25b)

9 years ago
I’m not sure that nav_text is a filter, but that’s not the point.
Use this snippet here:
```
/* add "Menu" to mobile menu icon */
.nav-toggle .fa-bars:before{
    position: absolute;
    content: "Menu \f0c9";
    right: 10px;
}
```
this solution works and was originally posted here:
https://wordpress.org/support/topic/text-menu-displayed-on-mobile-version/
If it solves your issue, please mark this topic as resolved.
Thanks
G.
Thread Starter Darío Orlando Fernández
(@soykatorce)

9 years ago
Giorgio,

The site () is a landing pages tank (each client has its own one-page landing page redirected from their social post on FB, Twitter, etc.). The top bar is used for the service provider corporate name and links to the site’s home where a service description is posted. It was very easy to achieve this on devices larger than 719px.

On mobiles I expected possible to eliminate the three-bars nav-toggle and use nav-text which I would easily style through CSS.

I understand that dealing with the hu_has_nav_menu hook could be cumbersome so I finally applied your suggestion
```
/* add "Menu" to mobile menu icon */
.nav-toggle .fa-bars:before{
    position: absolute;
    content: "ANNETTE CHARDON PRODUCCIONES"; /* no 3-bars icon */
    right: 100px;
    font-family: 'champ'!important;
    color:#297B76!important;
    font-size: 14px!important;
    padding-top: 0.5em;
}
@media only screen and (min-width: 360px) {
    .nav-toggle .fa-bars:before { right: 140px; }
}
@media only screen and (min-width: 375px) {
    .nav-toggle .fa-bars:before { right: 155px; }
}
@media only screen and (min-width: 414px) {
    .nav-toggle .fa-bars:before { right: 196px; }
}
```
and switched menu options between mobiles and larger devices
```
/* Menú en móviles */
#menu-item-376 { display:inline-block; }
#menu-item-895 { display:none; }

/* Menú en tablets, notebooks y desktops */
@media only screen and (min-width: 720px) {
    #menu-item-376 {display:none;}
    #menu-item-895 {display:inline-block;}
}
```
It does’nt look elegant BUT IT WORKS

Thank you very much!
Thread Starter Darío Orlando Fernández
(@soykatorce)

9 years ago

http://lan.mylifve.com

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile Menu Text’ is closed to new replies.

Tags