WordPress.org

Ready to get started?Download WordPress

Forums

Help finding theme: main menu split by logo? (10 posts)

  1. tg1
    Member
    Posted 2 years ago #

    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!

  2. igloobob
    Member
    Posted 1 year ago #

    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.

  3. tg1
    Member
    Posted 1 year ago #

    No - would still love to find a solution.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  5. tg1
    Member
    Posted 1 year ago #

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

  6. igloobob
    Member
    Posted 1 year ago #

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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  8. igloobob
    Member
    Posted 1 year ago #

    ok cheers Andrew I'll do that

  9. igloobob
    Member
    Posted 1 year ago #

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

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

    hopefully someone can point us in the right direction.

  10. igloobob
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.