Home / Forums / You Theme Support / Centre Menu with links either side

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

  • Tim Hensel
    Participant

    Hi there

    I’m trying to make a menu that looks like the one on this site http://dangerbirdrecords.com

    While I can get pretty close by turning the menu off and using links in text blocks, I can’t help but feel that’s going to cause issues further down the road, not least with mobile devices. This is what I’ve done http://bsp-dev.tinyrobot.design/wp/

    Is there a way to do this with the actual menu? Setting the options to centre menu and centre logo puts the logo above the menu links – I want them either side.

    Many thanks

    Tim

    Hi @timhensel

    This is possible but will require a number of customizations which we do not support.

    Can you please send over your login credentials so I can give it a try?

    Thanks!


    Tim Hensel
    Participant
    This reply has been marked as private.

    Hi @timhensel

    I was able to do a simple layout of what you want on this page:
    http://bsp-dev.tinyrobot.design/wp/test-page/

    All I did were:
    – set the header layout to center logo and menu
    – set a negative top margin to the menu so it overlaps with the logo
    – added a custom CSS class to the 4th and 5th menu item
    – added margin-right to the 4th item and margin-left to the 5th to create space for the logo

    The CSS is on the “Gear Icon” on the page’s visual Composer.

    One drawback to this is the logo is not clickable since the whole menu stretch is actually overlapping it.

    Regards,


    Tim Hensel
    Participant

    Hi Edcel

    That’s great, thank you.

    I’ve been trying to add more menu items to your test menu, and have adjusted the CSS to represent different list items, e.g. sixth and fifth, but I can’t get the gap in right place.

    What am I missing?

    Best

    Tim


    Tim Hensel
    Participant

    By the way I am very happy to request and pay for a customisation if that’s necessary.

    Hi @timhensel

    Where did you apply the CSS class? I checked the ‘Test Menu’ under Appearance > Menus and you only rearranged them, thus nullifying the CSS applied for the fourth and fifth item.

    If you check the menu items, the CSS is declared there. So you just need to add your CSS class then add the CSS styles for it using the class.

    Regards.


    Tim Hensel
    Participant

    Hi Edcel

    OK I see. Where do I go to edit/add the CSS classes to the menu items?

    Many thanks

    Tim

    Hi @timhensel

    You can add/edit the CSS classes via Appearance > Menus. Each menu item shows a form for css class.

    Regards,


    Tim Hensel
    Participant

    Hi Edcel

    That’s what I thought you meant. I’m probably being blind and/or dimwitted, but I can’t see a field for that:

    http://pasteboard.co/Ln6s6Pv80.jpg

    Hi @timhensel

    Please scroll up then click on the arrow beside Screen Options then make sure you put a check on ‘CSS Classes’.

    I assumed you were seeing this from your end since I already enabled it from my end.

    Regards,


    Tim Hensel
    Participant

    Hi Edcel

    Got it! Thank you – that’s what I was missing. I guess it must be a browser-enabled setting rather than a dashboard one.

    Hopefully should be plain sailing now 🙂

    Thanks again for your help

    Tim

    You’re welcome, @timhensel

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

You must be logged in to reply to this topic.