Adjustments mobile header, menu

  • Hello! I have a few questions around how to adjust the header styling under ~700px.

    – When viewing the theme from a mobile device (or less than ~700px width), the hamburger menu and social icons are spaced on 2 lines instead of 1. How can I get these to display on 1 line? In case this looks too cramped, how can I remove the social icons (or place them in the drop down menu)?

    – Right now, the logo and tagline are very small because they’re squished into the center of the screen. How can I adjust the logo and tagline to remove the padding on the left and right (for less than 700 px only)?

    – Once you tap into the menu, how can I remove the site title, tagline, and word menu so that the flyout just shows my menu’s categories? Alternatively, if I could add a square image (a square logo) to the top left of the flyout, that would work.

    Thank you!

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

  • Hi there

    i would like to know the answer of following question too

    how can I remove the social icons?

    I want to delete it Permanently using the child theme.
    coz i would like to use the whole navbar for the main menu only and align it to the middle

    thanks in advance

    @dlwalters13

    You will need to add some custom CSS to achieve this.
    Install and activate this plugin then go to “Add Custom CSS” on your dashboard and paste this

    @media (max-width: 767px) {
.site-bar .site-tools {display: none;}
.site-logo {padding: 30px 0;}
.mm-menu > .mm-panel.mm-hasnavbar {padding-top: 20px;}
.mm-hasnavbar-top-1 .mm-panel {top: 0;}
.mm-menu .mm-navbar {display: none !important;}
}

    in the box and save.

    @kimo50asa since this is not related to the original request, please create a new thread for it.

    Thank you.

    Thread Starter dlwalters13

    (@dlwalters13)

    Thank you! That works!

    I would like to just change the text that’s displayed at the top of the mobile menu since my site title and tagline are too small. I can see via “Inspect Element” in my browser, that it’s this code but I can’t figure out where to make the change. I’d like to change the “Example Text” part in the line below.

    <div class=”mm-navbar mm-navbar-top mm-navbar-top-1″><title>Example Text</title></div>

    Unfortunately the menu plugin does not offer the ability to use a custom title there, it automatically pulls the title attribute from the page’s HTML.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adjustments mobile header, menu’ is closed to new replies.