Menu items are either background image or text. Can't be both

Need help with the Administration of your Joomla! 3.x site? This is the spot for you.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Skarsburning
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Fri Dec 08, 2017 9:04 pm

Menu items are either background image or text. Can't be both

Postby Skarsburning » Fri Dec 08, 2017 10:42 pm

Hi,

I am having an issue where i am creating a menu and menu items. When i go to Link Type -> Link Image, and browse for my image which represents the button, when i click Add Menu Title, they don't merge but come one after the other. Let me show some examples:

This is my menu's item background menu2.jpg
Image
The Menu item title is On the nile bank
When i go to Link Image and browse to my menu item's background and when i click Add Menu Title to Yes, it puts the menu item's name NEXT to the image background, not inside the image background.
Image
This is what happens:
Image
I just want to use text for my menu button's names and have an image link at the same time. Result i want is this:
Image
To use menu2.jpg and to have text on top of it.
You do not have the required permissions to view the files attached to this post.

ecktion
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Sun Jul 26, 2009 7:17 pm

Re: Menu items are either background image or text. Can't be both

Postby ecktion » Fri Dec 08, 2017 10:54 pm

Hi,

you should add a class to your template where the menubutton is defined, then add this class into the "Image CSS Style" field.
example:

to be placed into custom css:
#menubackground {
background-image: url("menu2.jpg");
}

to be placed into Image CSS Style:
menubackground


brgds
Oli

Skarsburning
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Fri Dec 08, 2017 9:04 pm

Re: Menu items are either background image or text. Can't be both

Postby Skarsburning » Sat Dec 09, 2017 9:20 pm

Hi ecktion,

I am using Beez3 template so i've inserted the custom css just next to other menu item css in personal.css which controls the Beez3 template.

I've put the menubackground into Image CSS Style. I've tested the link to the menu2.jpg and it's the correct one, for start i've actually used the full link so i can't mistake it.

Nothing happens :( any ideas?

ecktion
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Sun Jul 26, 2009 7:17 pm

Re: Menu items are either background image or text. Can't be both

Postby ecktion » Sun Dec 10, 2017 12:18 am

yes :)
step 1: upload your image towards your images with media manager
step 2: go to your template (beez3) and create within the css folder the file "user.css"
step 3: paste the following code into that file:

#header ul.menu li a:link,#header ul.menu li a:visited,#header ul.menu li:last-child a {
background-image: url(/images/menu2.jpg);
background-color: transparent;
background-repeat: repeat-x;
}

thats all - tried also with the first suggestion but well this should do the trick now

brgds

Oli

Skarsburning
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Fri Dec 08, 2017 9:04 pm

Re: Menu items are either background image or text. Can't be both

Postby Skarsburning » Sun Dec 10, 2017 12:49 pm

Hi mate,

It didn't work as well unfortunately. But i managed to find a way! Let me share it here. You are completely on the right direction but how i achieved it is slightly different.

I opened the personal.css beez3 template file and added your suggestion but as a class. That's what i needed apparently, a class with a dot before my custom css. Example:

Code: Select all

.submenudjo {

        background: url('../../../images/menu2.jpg') no-repeat;
   background-position: center;
}


Then i went to the menu item and gave it a Link CSS Style. Boom. Working.

Thanks for you effort and thank you for pointing me to the right direction.


Return to “Administration Joomla! 3.x”

Who is online

Users browsing this forum: gws, SharkyKZ and 11 guests