Help finding theme: main menu split by logo?

  • Hey,

    I really want to do a site for a client in which the menu is split with a logo in the middle.

    Like this:

    Home | About | Products | LOGO IMAGE | Locations | Help | Contact

    However – being relatively new to WordPress I am a bit overwhelmed by template choices… but can’t find one that is similar. I would like to have control over web fonts for the menu also.

    Does anyone have any suggestions? Could really use some help.

    Many Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

  • hello,

    did you ever find a solution for this? I’m looking to do the same thing and don’t want to hard code the navigation if I can help it.

    Thread Starter tg1

    (@tg1)

    No – would still love to find a solution.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your queries are more CSS specific than WordPress and should be asked in a relative forum.

    Thread Starter tg1

    (@tg1)

    @andrew…
    Sorry about that… as someone who is new to WordPress – I would have put my money on some php gimmickry before CSS.

    I just don’t know how you can separate 2 sides of the dynamic wp menu to edit with css otherwise yes no problem.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    igloobob,

    This can be achieved with CSS. If you’re interested, ask on a more relevant forum as linked in the post prior to this.

    ok cheers Andrew I’ll do that

    hi tg1, I have posted a question on that css forum using your example:

    https://csscreator.com/topic/how-add-logo-th-emiddle-wordpress-menu

    hopefully someone can point us in the right direction.

    tg1 for your reference, this is a way to do it that was suggested on the thread I posted it on, I haven’t tried it but makes sense, obvious really I should have thought longer about it!

    Home | About | Products | LOGO IMAGE | Locations | Help | Contact

    Apply a margin right to the list item that has, “Products” and a margin left to the list item that has, “Locations”.

    This leaves you with a gap between Products and Locations.

    Add an image to the HTML below the menu, E.g

    <ul class=”yourMenu”>
    …

    <img class=”logo” src=”…” alt=”…” />

    Then apply position: relative; to the parent of the HTML containing both the menu and image.

    And then apply position: absolute; to the logo and fiddle about with top: 0; right: 0; and other positioning.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Help finding theme: main menu split by logo?’ is closed to new replies.