Home / Forums / DynamiX Support / Create a second horizontal submenu below the main menu

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts

  • fatheaddrummer
    Participant

    Hi,

    I want to have a main menu for the whole website (which is always shown) and then i want to add a second menu for a one page design – only appearing on the single one page below the main menu. Like this: http://www.native-instruments.com/en/products/komplete/bundles/komplete-10-ultimate/

    Can you tell me how I can do this? PLEASE! 🙂

    Thank you very much!
    Best,
    Christian

    Hi @fatheaddrummer

    This is possible but you will need a number of CSS codes to make it look the way you want. On the page you want the second menu to appear, you just need to add a WP Custom Menu Element. Once done, the menu should appear on the page only.

    Be sure to create the second menu via Appearance > Menus

    Thanks!


    fatheaddrummer
    Participant

    Hi

    Thank you very much for the support!

    Unfortunately I don’t know how to add a WP Custom Menu Element to my site?!
    Which CSS will I need to make it look like the website in the link?

    Thank you very much!

    Can you please send over your site’s login credentials so I can create a sample page with the custom menu?

    Thanks!


    fatheaddrummer
    Participant
    This reply has been marked as private.

    Hi @fatheaddrummer

    It looks like you have forgotten to specify your site’s URL. Can you please send it over as well?

    Thanks!


    fatheaddrummer
    Participant

    I’m sorry!

    http://www.diamond-precision-studio.com/mixing-drums-course

    Thank you very much!
    Chris

    Hi,

    Since you did not create the other menu yet, I just created a sample menu and used it on a sample page

    Here are the steps I followed:
    1. I created the ‘custom’ menu and added items to it (‘custom’ already existed but was empty so I just used it) https://diamond-precision-studio.com/wp-admin/nav-menus.php

    2. I then created the test page then added the WP Menu Element as seen here: https://diamond-precision-studio.com/wp-admin/post.php?post=5025&action=edit

    3 . After that, I added this CSS to the page alone to style the menu:

    #menu-custom li {
        display: inline;
        padding-right: 15px;
        text-transform: uppercase;
        font-weight: 600;
    }
    #menu-custom li a::before {
        content: none !important;
    }
    
    #menu-custom {
        direction: rtl;
        padding-top: 15px;
    }

    The 2 menus should now be working here: https://diamond-precision-studio.com/?page_id=5025&preview=true

    There’s more CSS needed to make it look like the first link you sent, but I just formatted the menu on this test page just so you can see that it is possible.

    Please check.

    Regards,


    fatheaddrummer
    Participant

    This is awesome, thank you very much!!

    Is it possible to make the custom menu transparent and float, while the main menu is fixed?
    When i turn the menu in the page options to transparent and float, it will put the custom menu above the main menu, and the main menu is hidden…

    Besides, when i try to add my Logo (in PNG) it will always just show the title of the logo, but not the logo, itself….(The Logo is saved in the media library: https://diamond-precision-studio.com/wp-content/uploads/2016/07/dps_logo2014_gold.png)

    Thank you very much for the great support!!

    Best, Christian

    Hi @fatheaddrummer

    It is possible however, it will require CSS codes again,

    Your logo should now appear on the site. We have to re upload a new one as the image you used was too big. Please check your site.

    Regards,


    fatheaddrummer
    Participant

    Hi,

    Thank you very much! The Logo seem to be working fine now. Altough, it suddenly supersized twice when i refreshed the page. But I deleted it from the media library, renamed it and since then i had no issues!
    Could you help me out, with the css modification in for the submenu?

    Thank you so much!
    Best, Christian

    Hi Christian,

    Can you create the 2nd menu first (the items you want added to it) so we can add it to the ‘mixing-drums-course’ page then add the CSS based on how it will interact with this actual page?

    Thanks!


    fatheaddrummer
    Participant

    Hi,

    You’re awesome, thank you very much!
    I will need about 5 different menus for 5 different sites. 2 of them are already created ( online-session-drummer) and (mixing-drums-course). But all of them can have exactly the same layout.
    I’ve added the 2nd menu to the online-session-drummer-page.
    Does it make sense, to working on the custom css for this page and then, i simply copy and paiste the menu? ( I know i will have to change the menu title within the css….
    Or is it better, to creating all sites first and then contact you again?

    Ps: I’ve already tried to edit your css on the online drummers page, but actually i know nothing about it and and i don’t like the result either, so there’s no need, the save anything I’ve done in the custom css settings on the online session drummer’s page.

    Thank you so much for the awesome support!

    Best, Christian

    Hi Christian,

    I did not see the menu you created so I just used the ‘online-session-drummer’ menu on the ‘mixing-drums-course’ page but I copied part of the page to a new so as not to disrupt the live page.

    I applied basic CSS then installed ‘Sticky Anything’ plugin to help with making the second menu stick to the page while scrolling and you will see it working now here: https://www.diamond-precision-studio.com/test-page-with-secondary-menu/ The header is set not to float because the 2nd menu is not clickable with a floating header because the header overlaps with the content container. If we set it the other way around, the first menu will not be clickable instead. If you want to use the transparent floating header, you will need CSS and other tweaks to make the 2 menus clickable. The non-floating header will make sure that no elements overlap making it easier to add CSS.

    Unfortunately, this is as far as we can go on this as this will require a whole lot of custom CSS to make the secondary behave the way you want and this is already considered advanced customization which we do not support. It is best to hire a developer to help you check on this further.

    Thanks!


    fatheaddrummer
    Participant

    Hi,

    Thank you so much, this already looks awesome! Maybe I will just turn off the sticky anything plugin, because it looks really cool, the way it is…
    I absolutely understand that this is, as far as we can go, and i am very thankful, that we could even go this far!!

    There’s are only a few questions left:

    1. The header-main menu is set not to float, but still floating. I am just wondering why? I am not sure, if i wanna keep it floating or fix and would appreciate the possibility being able to deciding later.

    2. You added my Logo Color to the 2nd menu, when activating a menu item. Wow, that’s so cool! How can I control the color of in general of main AND 2nd menu?

    3. How is it possible to make the second menu mobile friendly? (Just like the main menu menu button for mobile and tablet, but with a different color and place in the right upper corner on the row-image)….does this also count as advanced customization?

    4. Loading time of my page….I want to speed the page up to a loading time of less than 1 second. But at the moment I am always above 3 seconds….do you think that there’s more speed potential within the site, or will I just need to get a better. Server? I am using shared hosting of dreamhost at the moment. But I don’t wanna pay a whole annually hosting plan, until I am not sure it will surely increase my loading speed.

    Thank you so much for your awesome support! Sorry for so many questions!

    Best, Christian

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.