Mobile Menu on desktop & laptop (breakpoint and close button), move search button to top bar - Support

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
June 18, 2015 at 8:16 pm #461559

larrywillisva
Participant

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
Keymaster

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
Participant

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

June 23, 2015 at 6:52 am #463145

Rikard
Keymaster

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
Participant

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
Keymaster

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
Participant

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
Moderator
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
Participant

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
Participant

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
Inactive Moderator
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
Participant

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
Inactive Moderator
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
Participant

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.