Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

Creative Drop Down Menu

Home › Forums › Pro Support › Creative Drop Down Menu

Viewing 15 posts - 1 through 15 (of 23 total)
1 2
  • Author
    Posts
  • November 11, 2019 at 5:02 pm #69659
    Steve BraggSteve Bragg
    Participant

    Hi All

    My client has has someone create a design of their web site and in particular they want their drop down mobile menu to have some design in it. As per the attached file.

    So menu options at the top with underneath some links and some images and credits.

    Is it possible to do this as on some of the examples you show here: https://responsive.menu/#examples – it seems it might be.

    So if it is how do I go about adding these elements to the menu?

    Regards

    Steve B

    Attachments:
    You must be logged in to view attached files.
    November 11, 2019 at 6:00 pm #69663
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Steve,

    Hope you are doing well!

    As per the menu design you shared with us, you can implement this by using ‘Additional Content’ section of the responsive menu container settings. You can also refer to the examples you shared with us in your query above.

    Kind regards,
    Kriti Sharma

    November 11, 2019 at 6:54 pm #69666
    Steve BraggSteve Bragg
    Participant

    OK. Thanks

    I have done this and it looks fine. However your plugin does not disable the landing page header below a specific size. So on mobile device is shown the normal page header and your mobile button.

    On mobile device I just want your mobile menu, nothing else.

    Also how do I set the font density. Your plugin does not respect this for instance: Raleway (300).

    Please can you advise

    Thanks

    Steve

    November 12, 2019 at 5:31 am #69667
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Steve,

    If you want to show only the mobile button on mobile devices and not the normal header. You can do this easily by using ‘display: none’ CSS property for the header with a proper media query for mobile devices.

    And font weight(font density) can also be increased/decreased using CSS ‘font-weight’ property for li elements.

    Kind Regards,
    Kriti Sharma

    November 12, 2019 at 9:14 am #69668
    Steve BraggSteve Bragg
    Participant

    How is this done?

    Do you have example. I do not write code.

    Steve B

    November 12, 2019 at 11:54 am #69669
    Steve BraggSteve Bragg
    Participant

    Please can you advise as I did not find your response to my query that helpful.

    You may be a coder, but many people are not and when your web site advertises the simplicity of your plugin people can be fooled somewhat.

    You have some examples on your web site and this one: https://www.traveldoo.com/ seems to do what I want. Can you share with me how this was done?

    Regards

    Steve B

    November 12, 2019 at 12:31 pm #69670
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Steve,

    I am working on to give you the solution regarding https://www.traveldoo.com/ menu design using Responsive Menu Pro. Please give me some time to get back to you.

    Kind Regards,
    Kriti Sharma

    November 12, 2019 at 12:50 pm #69671
    Steve BraggSteve Bragg
    Participant

    I have put this into the Custom CSS:

    {
    font-weight: bold;
    }

    However the font appears bold on desktops (when display is shrunk to mobile size) but on the mobile device it does not show the font in bold.

    Do you know why??

    Regards

    Steve B

    November 12, 2019 at 1:12 pm #69672
    Kriti SharmaKriti Sharma
    Keymaster

    Hi,

    Can you please share the css code which you used on the website and also the URL of your website. Right now, I am writing steps on how to implement responsive menu like traveldoo.com.

    Regards,
    Kriti Sharma

    November 12, 2019 at 1:55 pm #69673
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Steve,

    As you have mentioned that you want to implement responsive menu like traveldoo.com. You don’t have to write any code for this.

    Please follow the following steps:

      1. As traveldoo.com has responsive menu enabled upto 1024px, so you have to put 1024px in Responsive menu settings -> Initial Setup -> Breakpoint.
      2. Now, Go to Container.
      3. To change the order of the responsive menu items. Go to first section ‘Ordering’, Disable ‘Title’ and drag & drop other items in the following order: ‘Search Box’, ‘Additional Content’, ‘Menu’.
      4. As the responsive menu has 100% width on all the screens. Go to ‘Sizing’ section. Put 100% value in the width field.
      5. Enable ‘Auto Height’ of responsive menu. It will cut off the extra space below the menu.
      6. You can also design the responsive button as per your requirements ‘Button’ tab.

    Hope you found it helpful.

    Kind Regards,
    Kriti Sharma

    November 12, 2019 at 2:08 pm #69674
    Steve BraggSteve Bragg
    Participant

    Hi Kriti

    I am not sure what you really mean by this comment:

    “Can you please share the css code which you used on the website and also the URL of your website. Right now, I am writing steps on how to implement responsive menu like traveldoo.com.”

    I have not used any CSS code, as I do not understand CSS.

    Steve

    November 12, 2019 at 2:16 pm #69675
    Steve BraggSteve Bragg
    Participant

    Regarding your post of 1:55pm.

    This does not work. When I do what you suggest I see the attached on the site. I do not want the header and original site menu showing. Traveldoo has seemed to disable this below a certain size.

    Attachments:
    You must be logged in to view attached files.
    November 12, 2019 at 3:13 pm #69677
    Steve BraggSteve Bragg
    Participant

    I have found a post from Peter from some time ago about font weights.

    He suggested this as CSS:

    .responsive-menu-pro-item-link {
    font-weight: bold !important;
    }

    However I am using a Google font – Raleway. This has font weights such as 300, 500, 600 and so on. I have tried putting font-weight: 500 in the CSS but it does not work.

    How do I change a font weight to match it’s weight number?

    Regards

    Steve B

    November 12, 2019 at 3:14 pm #69678
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Steve,

    Regarding my comment of 1:12 CSS code, I was asking about your response on 12:50 pm in which you said that you used font-weight: bold; CSS but it is only working for desktops and not mobile devices. I wanted to CSS selectors you were using in that shortcode.

    Regarding my comment on 12:50 pm, I used exact same steps on how to setup menu like traveldoo. Can you please share the URL of your website, so that I can tell you what you are missing to replicate the menu like traveldoo.

    Regards,
    Kriti

    November 12, 2019 at 3:23 pm #69679
    Kriti SharmaKriti Sharma
    Keymaster

    Hi Steve,

    You can use following CSS code with Raleway font to make the font-weight bold as per your requirements:

    .responsive-menu-pro-item-link {
    font-weight: 500 !important;
    }

    You can replace 500 with 100-900 in the CSS code, as you want it.

    Regards,
    Kriti

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 23 total)
1 2
  • The topic ‘Creative Drop Down Menu’ is closed to new replies.