Need help? Check out our Support site, then


CSS for adding a extra header menu

  1. Hi,

    I would like to place another menu above the current main menu at the right top of the website. The main menu is currenlty used for avigation. But i want to add another one above this main menu to use for a multilingual website ( so this menu will include links to the other languages website).

    Can someone help me or tell me if this is even possible.

    I work with the theme 'Purpose'.

    Please let me know & thank you in advance!

    The blog I need help with is spanishschooltours.com.

  2. With the design of Purpose, this isn't something that we can do cleanly and we would end up having to limit the change to only certain screen/window widths.

    What about adding them to the navigation menu and then we can move those menu items to the left? This is just a rough idea, which moves your "contact" menu item to the far left and the code needs some more tweaking, but let me know if you think this will work for you and we can then proceed with the final code.

    @media screen and (min-width: 1025px) {
    #header .row .eleven, #navigation {
        box-sizing: border-box;
        max-width: 100%;
        text-align: right;
        width: 100%;
    }
    #menu-item-76 {
        left: 36px;
        position: absolute;
    }
    }

    If this will work for you, add your menu items to the bottom (right) of the menu and post back here and we can modify the above code and get things going for you.

  3. Thank you for your response!

    I don't really get what you want to do with the menus. If i'm correct you want to more the current main menu to the left, and place a new menu with the language options at the right?

    Could you explain me how to do this in detail?

    Thank you in advance!

  4. What you do is add the language options to your existing menu as menu items at Appearance > Menu. We can then move those language menu items over where you want them.

  5. Could you still help me with this? I would like to test out how it will look. Can you tell me what i need to do?

  6. Richard's (very clever!) idea was to pull out your language menu items and move them to the far left. If you put the CSS he provided earlier into your Customizer you can get an idea of what he means, using your Contact link as a stand-in for your language menu items, which you haven't added yet. It should look something like this:

    https://cloudup.com/cNaFsYywJst

    If you like the idea, then go ahead and add your new language items and then we can help you move them over to where the example Contact link is now in the screenshot.

  7. Ah okay i get the idea, thank you for showing me the screenshot! I have no idea if it's possible but could we also use icons instead of text for linking the other language website. By this is mean for example an icon of the Spanish flag which will link the visitor to the Spanish version of our site.

  8. You could upload the flags to your media library and then add them as background image to specific menu items.

    Here's an example of how this CSS would like:

    #menu-item-74 {
        background-image: url(spanish-flag.png);
    }

    From the above snippet, #menu-item-74 would be replaced with the unique ID of the menu item that has the link to your Spanish site and spanish-flag.png would be replaced with the URL to your image.

    If you upload the images of the flags to your Media Library and also add the language links to your menu, we can help with the specific CSS that's needed.

  9. laoheritageflag
    Member

    I would like to put "The Lao Heritage & Freedom Flag, Inc." before "
    Blog at WordPress.com. The Blogum Theme.". Please help! my email: [email redacted]. Thanks

  10. @laoheritageflag:

    You can add that credit to your footer using the following custom CSS:

    footer.footer:before {
    content: "The Lao Heritage & Freedom Flag, Inc.";
    }

    If you have further questions then please start a separate thread. It's easier for us to help when separate questions are kept to separate threads.

    Thanks!

  11. Thank you all for helping me out, i added a custom link to the menu called "ES". I would like to move that link all the way to the left of the menu line. and ideally change the text ES into the icon of a spanish flag. I already uploaded the icon to my mediafile, its called: "Icon - Spain.png".

    Could you please tell me which CSS coding i need to insert to get the result?
    Thank you in advance!

  12. Hi @maebelbakker,

    Thank you for adding that menu item and uploading the flag icon to your media library! i had an experiment and came up with the following CSS. Can you give it a try?

    #menu-item-2068 a {
        background-image: url(https://spanishschooltoursdotcom.files.wordpress.com/2016/06/icon-spain.png);
        background-size: 28px 21px;
        color: transparent !important;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
    }
    
    @media screen and (min-width: 1025px) {
    #header .row .eleven, #navigation {
        box-sizing: border-box;
        max-width: 100%;
        text-align: right;
        width: 100%;
    }
    
    #menu-item-2068 {
        left: 36px;
        position: absolute;
    }
    }

    Let me know how that goes and have a wonderful weekend, also.

  13. Hi, there!

    I tried the same thing on my site, but the menu button on the far left is not fixed. It disappears when I make the page smaller. How can I fix it?

    Here is the site: https://cineramabc.wordpress.com/

  14. @letsdesigntogether: Can you create a new thread on this forum with your question? We'll be happy to help from there!

    (It's easier for us to help if questions are kept to separate threads and also prevents the original poster here from receiving unrelated email notifications.)

  15. Awesome, let me try on my blog [link to wp.org site redacted by mod]
    I want user login button

  16. @sandhiyarao: The site you linked to isn't hosted here at WordPress.com. Instead, it's hosted elsewhere and running on the free software available at WordPress.org.

    If you're unsure on the differences between the two types of WordPress (WordPress.com and WordPress.org) then this guide gives a good overview.

    The best place for you to get help with questions on your site is therefore the separate forums over at WordPress.org:

    https://wordpress.org/support/

    If there are a lot of CSS customisations that you wish to make then I recommend contacting your theme's support team directly.

Topic Closed

This topic has been closed to new replies.

About this Topic