Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 13, 2018 at 11:41 pm #1033225
    robertwood04

    Hello,
    I’m wondering if there is a way to increase my header image size on mobile devices to make it larger. I’m also wondering if there is a way to reposition the menu selector underneath the header with a title that says menu. Thanks!

    November 15, 2018 at 4:50 am #1033760
    Rikard

    Hey robertwood04,

    Header image: I’m not sure exactly what you are looking to achieve, could you post a screenshot highlighting the changes please?

    Menu: do you want it under the image in the header with the word Menu added before or after it?

    Best regards,
    Rikard

    November 15, 2018 at 5:40 am #1033769
    robertwood04

    I would like Menu added before and just enlarge the header image for a mobile phone. I’ve included the the image I am currently using and an example of the size I desire to make the header more visible.

    November 15, 2018 at 9:46 pm #1034158
    Victoria

    Hi robertwood04,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .main_menu {
    display: none;
  }
  .responsive #top #wrap_all #header_main_alternate .main_menu, 
  .responsive #header_main_alternate {
      display: block;
  }
  .responsive #top #wrap_all .container.av-logo-container {
    width: 100%;
    max-width: 100%;
  }
  .responsive #top .logo {
      width: 100%;
     height: auto !important; 
  }
  .responsive .logo a {
    display: block;

  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 15, 2018 at 10:40 pm #1034168
    robertwood04

    Thank you! It worked fine. Is there a way to add the word ‘Menu’ to the left of the menu button on mobile?

    November 15, 2018 at 10:51 pm #1034169
    robertwood04

    I also noticed that the ‘X’ to close the menu is now centered over the first menu item instead of to the upper right. How do I correct that?

    November 19, 2018 at 11:58 am #1035137
    Nikko

    Hi,

    Try adding this code at the bottom of your functions.php:

    function add_menu_text(){
?>
<script>
$( document ).ready(function() {
	var el = $( "#avia-menu .av-burger-menu-main a" ),
		text = '<span class="av-burger-text">Menu</span>';

		el.prepend(text);
});
</script>
<?php
}

add_action('wp_head', 'add_menu_text');

    Then in Quick CSS, located in the WP Dashboard, Enfold > General Styling add this css code:

    #avia-menu .av-burger-menu-main span.av-burger-text {
    font-size: 24px;
}

.html_av-overlay-side #top #header .avia-menu.av-main-nav-wrap {
    text-align: right;
}

    Just adjust the font size as you see fit.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.