using image in menu

General questions about CMSimple
bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 11:05 am

Thanks cmss !!
But.... can you please write in english?? My German understanding is sooooooooo bad :lol:

cmss
Posts: 244
Joined: Mon Jan 02, 2017 6:15 pm

Re: using image in menu

Post by cmss » Thu Oct 14, 2021 11:11 am

As i said : add .ddm_link (.lck_nav .ddm_link a[href$="/?Home"],.... )
- or change to Ick_ddmenu.css (not tested - hope it functions - empty browser cache after it)

* The problem with the mobil mode is that the mobile styling is different :
.lck_nav_mobil nav a {
background-color: #444;
color: #fff !important;
display: block;
font-size: 1rem;
padding: 6px 15px;
}
So You have to make a change also there (in Ick_ddmenu.css ) :
.lck_nav .ddm_link a[href$="/?Home"], .lck_nav:mobil nav a[href$="/?Home"],....

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 11:47 am

Thanks again!!!

I first added this without result:

Code: Select all

.lck_nav .ddm_link a[href$="/?Welkom"] {
	color: transparent;
}
.lck_nav .ddm_link a[href$="/?Welkom"]:before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.lck_nav .ddm_link a[href$="/?Welkom"]:before {
	content: url(images/rtv_logo_white.png);
}
Now i do added this (include a, before ddm_link and this is working!!

Code: Select all

.lck_nav, .ddm_link a[href$="/?Welkom"] {
	color: transparent;
}
.lck_nav, .ddm_link a[href$="/?Welkom"]:before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.lck_nav, .ddm_link a[href$="/?Welkom"]:before {
	content: url(images/rtv_logo_white.png);
	height: 40px;
	width: 40px;
}
The height is working for the image but the width...... it is 100% full screen :-(

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: using image in menu

Post by lck » Thu Oct 14, 2021 11:56 am

That is something completely different again. Look at my code again, have you tested this?
A link to the website might also be helpful.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

cmss
Posts: 244
Joined: Mon Jan 02, 2017 6:15 pm

Re: using image in menu

Post by cmss » Thu Oct 14, 2021 12:20 pm

.lck_nav, .ddm_link a[...

This styles .lck_nav too - while .ddm_link a[ is sufficient. This functions because .ddm_link is the class of the <span> around the anchor. I would test, whether it functions without ".lck_nav," and not use that then.

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 12:44 pm

I now did try it without .lck_nav but it does not work at all then.
Guys, i do appreciate your time spending on this, but hey...... if it does not work.... then it be so.

It would be nice if we get it to work but not if you have to spend hours on this. ;)
But i still wonder why it does work when logged in as admin on cmsimple and click on "view website". And soon as logged out it is not showing??

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 12:52 pm

lck wrote:
Thu Oct 14, 2021 11:56 am
That is something completely different again. Look at my code again, have you tested this?
A link to the website might also be helpful.
Yes i did test your code and it did work fine when logged in as admin and click on "view website". But soon as i log out it is not visible.
Right now i did use the other code from cmss, and this is the result: https://kreutzerindemorgen.nl/nieuw/

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: using image in menu

Post by lck » Thu Oct 14, 2021 1:15 pm

bastingse wrote:
Thu Oct 14, 2021 12:52 pm
Yes i did test your code and it did work fine when logged in as admin and click on "view website". But soon as i log out it is not visible.
Right now i did use the other code from cmss, and this is the result: https://kreutzerindemorgen.nl/nieuw/
You see, it's always good to have a direct look. I was also afraid of that.
"Welkom" is the first link, this is the problem since CMSimple_XH 1.7.4. For reasons of duplicate content (DC) was introduced, that the name of the startpage, so in your case "Welkom" is removed from the URL.

Then just like this.

Code: Select all

.lck_nav .menulevel1 > li:first-of-type a {
	color: transparent !important;
}
.lck_nav .menulevel1 > li:first-of-type a:before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.lck_nav .menulevel1 > li:first-of-type a:before {
	content: url(images/rtv_logo_white.png);
	height: 40px;
	width: 40px;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 1:30 pm

Then just like this.
I now added your code to the css but it doesn't effect.
I did remove the old code, nothing is change.

Do i have to xopy and paste your complete code or should i replace "first-of-type" for ?Welkom ??
Sorry folks, i'm such a dummy on coding :)

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: using image in menu

Post by lck » Thu Oct 14, 2021 1:44 pm

Remove the old style first, line 2 to 15 in lck_ddmenu.css

Code: Select all

.lck_nav, .ddm_link a[href$="/?Welkom"] {
	color: transparent;
}
.lck_nav, .ddm_link a[href$="/?Welkom"]:before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.lck_nav, .ddm_link a[href$="/?Welkom"]:before {
	content: url(images/rtv_logo_white.png);
	height: 40px;
	width: 40px;
}
Then paste that (shortened it some more).

Code: Select all

.lck_nav .menulevel1 > li:first-of-type a {
	color: transparent !important;
}
.lck_nav .menulevel1 > li:first-of-type a:before {
	content: url(images/rtv_logo_white.png);
	height: 100%;
	position: absolute;
	/* right: 0; */ /* optional */
	top: 50%;
	transform: translate(0, -50%);
	width: auto;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Post Reply