Centered main menu icons

  • Resolved AlexS

    (@alexarium)


    9 years, 1 month ago

    Hello

    I’d like to ask if there is a way to move the menu icons from the left of each menu link to the top.

    So this will become this

    Thanks in advance

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

  • Any chance you can post a link to your site? Then I could make an attempt to write you some CSS to achieve this.

    Thread Starter AlexS

    (@alexarium)

    Absolutely, here it is

    Bournemouth in Bloom

    I don’t see the icons on your menu, using either Safari or Firefox. How did you add them?

    Thread Starter AlexS

    (@alexarium)

    The site is live, so I don’t want to add them just yet until I can sort this out.

    I added them with CSS-Classes in the WordPress Menu sention, using the icons from here

    Are you using :before or :after to add the icons? Can you post the CSS you’re using to Pastebin and post the link here?

    Thread Starter AlexS

    (@alexarium)

    I just added the Home button, maybe that’ll help.
    The site is live and you can find it there.

    Thanks for your effort.

    You could try some absolute positioning, but this is something that’s a bit of a challenge to get completely right.

    .sf-menu li {
	position: relative;
}

.sf-menu li a i {
	position: absolute;
}

.sf-menu li.menu-home a i {
	top: 35%;
	left: 40%;
}

    You may have to adjust the percentages individually for each menu item, and if that’s the case, you can use .sf-menu li.menu-about-us a i {}, .sf-menu li.latest-news a i {}, etc.

    Thread Starter AlexS

    (@alexarium)

    Thanks a lot Stephen, I’ll try that.

    Thank you for your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Centered main menu icons’ is closed to new replies.