Mobile Menu Text

  • 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

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

  • 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://www.ads-software.com/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)

    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)

    https://lan.mylifve.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile Menu Text’ is closed to new replies.