New to the community? Start here

moving menu text below its image "Menu-Image" plugin

Hi, i am trying to move the "Home" text of the menu item below the site Logo + centered to it (currently using the same menu item)

im using a plugin - https://wordpress.org/plugins/menu-image/

What i am trying to do is detailed in this topic post. However when applied in my Custom CSS there seems to be no effect.

#menu-item-448 li a {
display: block; !important;
text-align: center;
}

https://wordpress.org/support/topic/title-under-icon-image

*URL(S) REMOVED*

i have opened support access if that helps

Thanks

Tom

Vaughan
- Support/SLS MockingJay: Earn your WPMU DEV membership
- 3,100 pts: Hero points 22,948 pts: Rep. points LEVEL 30
Hi Tom,

Hope you're well?

Can you try the following CSS
```
li#menu-item-448 a img {
    left: 20px;
    position: relative;
    top: -34px;
}
#menu-item-448 a span {
    left: -90px;
    position: relative;
    top: 32px;
}
```
Then just adjust the left & top values to get it positioned where you want.

Hope this helps
Tom
- Code Wrangler: Earn your WPMU DEV membership
- 157 pts: Hero points 2,030 pts: Rep. points LEVEL 12
Hi Vaughan,

Thanks for the reply.

That works great thanks.

Is there any way to lower that whole block slightly so that is its more aigned with the other menu items (logo lowered and centred along its horizontal axis if possible)

Thanks

Tom
Vaughan
- Support/SLS MockingJay: Earn your WPMU DEV membership
- 3,100 pts: Hero points 22,948 pts: Rep. points LEVEL 30
Hi,

Yes, Just adjust the top: values in the CSS for each rule.

a negative value will move the element up, a positive value will move the element down.

So if you wish to move the image down

change the value for top in the first rule.

top: -34px

so in this case, if you wish to move it down 10px change the value to -24

Then you also then need to lower the value for the text too.

So whatever px you take off the top, you add to the span rule

top: 42px etc.

So with a little adjustment, I have aligned the text in the image with the actual menu text & dropped the home text further.
```
li#menu-item-448 a img {
    left: 20px;
    position: relative;
    top: 0px;
}
#menu-item-448 a span {
    left: -90px;
    position: relative;
    top: 60px;
}
```
Hope this helps

Live Chat

Hi, I’m available right now to answer any of your questions :)

Email Us Find out more