Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 18, 2015 at 8:16 pm #461559
    larrywillisva

    A few questions…

    My site is set to 1310px wide and we have users who get the mobile menu on their laptop when the browser window isn’t completely open. I know I rarely open mine all the way, but the mobile menu shouldn’t appear when it’s just a little smaller than the screen size. I’m sure that the screen resolution affects this somehow, but how can I change the breakpoint so the mobile menu won’t show up until the browser window is at say 60%.

    The close button for the mobile menu doesn’t show up on laptops, desktops (any browser), or the iPad in the horizontal position (it shows up in the vertical position). I’ve changed the color to red, so I know it isn’t a color issue.

    The search icon goes away when the mobile menu is present. I’d actually rather move that icon to the top bar to the left of the social icons anyway. I’d like there to be a separator line between the search icon and the twitter icon, just like all the other separators.

    Thanks!

    June 19, 2015 at 8:03 am #461722
    Rikard

    Hey larrywillisva!

    The breakpoint it set to a fixed pixel value, right now it set at 1200px, what would you like it to change it to?

    Regards,
    Rikard

    June 22, 2015 at 2:20 pm #462792
    larrywillisva

    What do you think would be best for a 13″ laptop? Maybe 1100px or 1024px?

    June 23, 2015 at 6:52 am #463145
    Rikard

    Hi!

    It depends if it clashes with the menu items, I think 1024px would be too small. Did you make any changes to your theme? The mobile menu buttons looks off and it’s not working, that’s why I’m asking.

    Cheers!
    Rikard

    June 23, 2015 at 1:59 pm #463372
    larrywillisva

    I made the CSS changes in the content box below.
    The mobile menu looks fine to me on five different devices and is working fine; what are you seeing?

    I’d like to try changing the break point to 1100px. Can you provide the code to do this and I can adjust as necessary.

    Thanks!

    June 23, 2015 at 2:24 pm #463397
    Yigit

    Hey!

    Please edit the custom CSS code you added and change “1200px” value to “1100px”

    Cheers!
    Yigit

    June 23, 2015 at 4:05 pm #463476
    larrywillisva

    That works, thanks Yigit!

    How about my other two questions:
    The close button for the mobile menu doesn’t show up on laptops, desktops (any browser), or the iPad in the horizontal position (it shows up in the vertical position). I’ve changed the color to red, so I know it isn’t a color issue.

    The search icon goes away when the mobile menu is present. I’d actually rather move that icon to the top bar to the left of the social icons anyway. I’d like there to be a separator line between the search icon and the twitter icon, just like all the other separators.

    June 24, 2015 at 10:54 am #463894
    Ismael

    Hey!

    You can use this to fix the mobile menu:

    @media only screen and (max-width: 1100px) {{
#advanced_menu_hide {display:block !important; }
}}

    For the search icon, try to add this in the functions.php file:

    add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');

function avia_append_search_nav_mod()
{
    ob_start();
    get_search_form();
    $form =  htmlspecialchars(ob_get_clean()) ;

    $items = '<div id="menu-item-search" class="menu-item-search-mod menu-item menu-item-search-dropdown">
        <a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a>
           </div>';

    echo $items;
}

    Add this in the Quick CSS field:

    .menu-item-search-mod {
  position: absolute;
  top: -8px;
  right: 100px;
}

@media only screen and (min-width: 1099px) {{
  .menu-item-search-mod { display: none !important; }
}}

    Regards,
    Ismael

    June 30, 2015 at 3:40 pm #466527
    larrywillisva

    I added the code to display the close box for the mobile menu, but I don’t see the close option unless I shrink the window way down. I have the breakpoint for desktops/laptops set at 1150px, so that’s what I used in the code you provided.

    The code to put the search icon in the top menu bar works except the absolute position doesn’t allow it to adjust as the window is sized, so it overlaps the top menu links. Can it be placed in the area where the social icons are, adjusting location as the screen size changes?

    July 1, 2015 at 1:27 pm #466958
    larrywillisva

    In addition, when I hover over the search icon, it disappears. I think it may just need a color change.

    July 3, 2015 at 10:29 am #467892
    Andy

    Hi!

    adjust this code Ismael provided to you for your mobile menu:

    @media only screen and (max-width: 1100px) {{
#advanced_menu_hide {display:block !important; }
}}

    Basically you need to change the (max-width) value, which says for which browser size you want the following code to work. You could use (min-width) as well, e.g.:

    @media only screen and (min-width: 800px) {{
#advanced_menu_hide {display:block !important; }
}}

    Which search icon does disappear? I can’t find one on your website. Screenshots would help I think (imgur, dropbox).

    Cheers!
    Andy

    July 6, 2015 at 1:41 pm #468886
    larrywillisva

    I was able to get the close button to work on the mobile menu by removing the extra curly brackets from the provided code; so this is what I used and it works.

    @media only screen and (max-width: 1150px) {
    #advanced_menu_hide { display:block !important; }
    }

    The search icon is in the top bar; I moved it’s location to the right so you can see it (it was being overlapped by the menu items). The absolute position keeps it from adjusting location as the window is resized, and when you mouse over the icon, it disappears.

    July 7, 2015 at 3:09 pm #469708
    Andy

    Hey!

    go with this code to control hover color for search item:

    div#menu-item-search:hover {
color: red;
}

    To control its position when resizing browser you need to work with media queries, e.g. for iPad use something like this:

    @media only screen and (max-device-width: 1024px) {
div#menu-item-search {
right: -37px;
}}

    Cheers!
    Andy

    July 8, 2015 at 5:01 pm #470392
    larrywillisva

    hover for search icon is working now.

    I think I’ve found a good position for the search icon so it looks fine on the mobile devices I am using for testing.

    Thanks for the help!

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Mobile Menu on desktop & laptop (breakpoint and close button), move search button to top bar’ is closed to new replies.