Home Forums Archived Forums Weaver II Theme Weaver II Pro Issues on mobile menue

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #18158
    Hangover
    Participant

    Hello,

    I am using Weaver II Pro +

    @Scrambler, thank you for all the hints, help and possibilities, I found in the forum and the help:
    http://forum-archive.weavertheme.com/discussion/9285/suggestion-for-mobile-menu
    http://forum-archive.weavertheme.com/discussion/4567/infos-and-examples-for-custom-css-rules-part6#Item_1

    But I could not find any hint for my problems: I want to have different mobile css in custom CSS Rules, but I could not find the correct names for the menu I use.
    See my site: http://fzbruchsal2.fzbruchsal.de

    1) I tried to get rid of the black border on the top menu (top right: “Top” and below picture “Inhalt”):
    .mobile-menu-link {float:none;margin:0;border:none;}
    –> did not work.

    2) I prefer to have the lines in the menu back, but they disappeared and I could not follow when. (click on “Inhalt”, menu opens, font color is black and no lines are displayed)
    Probably, when I tried to get the vertical menu (on top normal page) transparent over keyvisual picture, I lost the css using Slider Menu on Plus?

    3) Using a mobile phone, the content of the menues is correct:
    Click on “Top” and “Inhalt” two different menues are displayed.
    Using the browser the menue content is the same: Only content of “Top”, also when click on “Inhalt”.
    I used word press menu; widget primary (top) sidebar, content navigation.
    I activated for the “Top” menu primary navigation and secondary navigation.
    Menu “Inhalt” only activated mobile navigation.

    Can anybody help me? Thank you.

    #24127
    scrambler
    Moderator

    1)
    .mobile-menu-link {float:none;margin:0;border:none;}

    Is the proper rule, but I do not see it in your site.

    if you have the rule in place:
    First, where did you put it
    Second check all your custom CSS for syntax error that could break your CSS file.

    If you dont have the rule in, please put it in Advanced Options > HEad Section > Custom CSS Rule box and post back

    2)  Your mobile menu border rule has been changed to

    border-top:2px solid inherit;

    Which is invalid as instead of inherit there should be a color (name or hex code or rgb), Instead it should look something like
    border-top:2px solid #000000;

    I am not sure where you changed that, but get rid of inherit and use a color instead

    3) I do not understand your question

    Your site appears to be setup with 3 menus…

    A primary (bottom) and Secondary (top) menu bars that have the same 3 menu items (Willkommen / Beitrage / Kontakt, but that are hidden on desktop, I suppose with the option in Main options > Menus > Mobile > Hide menu bar desktop.

    Then you have added a third menu in a header gadget to be displayed over the header image, that has the same 3 menu items and is visible all the time.

    So on desktop you only see one menu, the one in the gadget, but on mobile you see three.

    So you need to explain in details what you were trying to achieve…

    #24128
    Hangover
    Participant

    Thank you!

    1)  yes, I put the rule in and it works!  (I had some code there, but put it away, sorry.)

    2) I cannot find it. What a pity. May I change one of the css-files?
    I really cannot imagine, where I could have written inherit. Could this result from configuration within Weaver?
    I could not find a border-top: 2px either. I know, I used total CSS before, but deleted all entries I made there. Maybe I could have used inherit there once.
    I will look through all this again. Wish me luck.

    3)  My intension are three menues:
    1 – Top Menu “Top”, just has three categories: Bogs, Pages and third, just a landing page for contact information.
    2 – Pages Content “Inhalt” – Navigation for the webpages within word press.
    3 – Blog Content – categories for blogs.

    Used:
    desktop: Uses Top (1) displayed over header image, on the left content (2) and blog categories (3)
    mobile: Top (1) as top menu (above header image); content (2) below header image, no blog categories (3)

    Your suggestion is correct, I hide bottom and secondary menu bars with this option: Main options > Menus > Mobile > Hide menu bar desktop

    But I did not add a third menu in a header gadget, I use the Top (1) there. It is not visible on mobile devices. Set in: Shortcodes + Pro -> Header Gadgets -> Hide if Phone or Small Tablet View.
    [weaver_extra_menu wrap='wrap_class' menu='Top' style='menu_bar' width='width_override' css='extra_css']
    I think, I redesign this with Extra CSS styling within these options. Maybe this solves the inherit problem.

    So on desktop I see three menues (1-Top, 2-Content, 3-Blogs)
    On mobile, displayed on a mobile device, I see two (1-Top, 2-Content)
    On mobile, displayed on a pc, I see one (1-Top)

    Did this explain my intensions?

    Blog categories (3) would be nice to be shown below header image on mobile devices, when displaying a blog page, but I could not manage this. I have an overview page now for all blogs in yearly view as landing page for blogs instead.

    Thank you very much for your time and understanding!

    #24129
    scrambler
    Moderator

    20 it may have come from a sub theme you used, in which case it could be in Advanced Options > Head Section > Custom CSS Rule box.

    Or it could be in one of the menu option CSS+ boxes.

    The full resulting rule is

    .widget-area .menu-vertical li a, .widget-area .menu-vertical a:visited, .menu-vertical li a, .menu-vertical a:visited {
    color: inherit;  background-color: transparent; display: block !important; padding: 5px 10px; text-decoration: none; border-top:2px solid inherit;}

    So if really you cannot find it, you could add the rule below in Advanced Options > Head Section > Custom CSS Rule box to override it

    .menu-vertical li a {border-top:2px solid black;}

    3) If you want different menu items in the primary secondary and extra menu shortcode, you need to create 3 different menus in Appearance > Menus. These area called WordPress Custom Menus. If not familiar with them, search youtube for WordPress Custom Menu Tutorials.

    Once you have 3 different menus created, you can allocate the proper one to primary and secondary in Appearance > Menus > Manage Locations. For the extra menu shortcode you placed in the header gadget, you select that menu with the menu=”menuname” option. And by the way you do not need all options in the shortcode, just the one you need so just use

    [weaver_extra_menu menu='Top' style='menu_bar']

    Assuming you created a Custom menu called Top in Appearance > menus

    #24130
    Hangover
    Participant

    Thanks again for all the help!

    2) I checked the box again and all other weaver II boxes, incl. full CSS boxes more than twice. No, I could not find it.
    But “.widget-area … ” sounds like a plugin could have given me the rule.
    I added your recommendation.

    3) Well I made three different menues with wordpress. I’ve got no problems with all the menus. Sorry, for not beeing clear. I just saw that the output is confusing and I could not find out, why displaying in my pc (by resizing the browser window) is different from my phone.

    #24131
    scrambler
    Moderator
    You are using a Smart Mobile mode, that will not treat a small browser as a phone.
    Smart was an old mode designed in the early days of mobile devices. You should not be using that any more, but use Responsive mode instead.
    Then if you have a different menu in Mobile it is probably because you setup a different one in Appearance > Menus > Manage location for mobile.
    #24132
    Hangover
    Participant

    Hello scrambler,
    thank you very much for all your advises.
    Iadded another menu and changed the appearances, also the responsive setting.

    Now another issue appears.
    I told Weaver II Shortcodes Pro + Header Gadget not to show the menue over the header (Hide if Phone or Small Tablet View.). Now it is shown on the phone.
    When I select smart, it does not show. This could be a bug, right?
    Thanks again.

    #24133
    scrambler
    Moderator

    It is possible that option only works with Smart, but you can hide the gadget on mobile by adding the rule below in Advanced options > HEad Section > Custom CSS Rule box.

    To hide on phone and small tablet

    @media only screen and (max-width:640px) {
    #wvr_gadget_1 {display:none;}
    }

    To only hide on phones, change the 640px to 580px

    #24134
    Hangover
    Participant

    Fantastic! Thank you! You know everything!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘ Weaver II Pro’ is closed to new topics and replies.