Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • April 23, 2015 at 8:24 pm #433729
    nvictory

    I was in need of an area to add text to in the header area next to the logo, and was able to accomplish this when viewing on a computer. However, I also need this text to show up on mobile devices. Is there a way to do this? Here’s what I did to get the text to display in the header:

    I placed the following code in my functions.php file to add the text:

    add_action(‘ava_after_main_menu’,’logo_text’);
    function logo_text() {
    echo “<div class=’logo-text’>Leading Innovation in Advanced Network Application Acceleration</div>”;
    }
    And used the following CSS to style the text:
    .logo-text {
    font-weight: bold;
    font-size: 15px;
    color: #1b86c8;
    position: relative;
    top: -85px;
    left: 25%;
    line-height: 0; // if I place 28px the Menü below shifts 28 pixels, too
    }
    Any help would be greatly appreciated! Thanks!

    April 23, 2015 at 8:47 pm #433745
    Yigit

    Hi nvictory!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate { display: block; }
.html_header_top.html_logo_center .main_menu { display: none; }
div#header_main_alternate>.container { margin-top: -63px!important; }
.logo-text {
  font-size: 15px;
  top: -5px;
  left: 32%;
  line-height: 31px;
  width: 50%;
}}
@media only screen and (max-width: 480px) {
.logo-text { left: 53%; }
div#header_main_alternate>.container { margin-top: -93px!important; }}

    Cheers!
    Yigit

    April 28, 2015 at 7:23 pm #436311
    nvictory

    Thanks Yigit! That did the trick.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Added Text to Header Area but isn't Visible on Mobile’ is closed to new replies.