Template HelixUltimate: CSS Issue

Everything to do with Joomla! 4.x templates and templating.

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.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Template HelixUltimate: CSS Issue

Post by Phala » Sun Apr 07, 2024 9:40 am

Hello Joomlers,

I need help on how to set "margin" on template: I'm working on Custom.css tempalte, and I found where modify the properties for main menu, placed on top:

http://opale.sviluppo.host/

the string I've used:

Code: Select all

div.sp-column.d-flex.justify-content-end.align-items-center { 
a:hover { background: #556a29; margin:0px 0px 0px 0px; font-weight: bold; font-size: 16px; vertical-align: middle;}
a:active { background: #fcf8e3; margin:0px 0px 0px 0px; font-weight: bold; font-weight: bold;
	font-size: 16px; vertical-align: middle;  }
a:visited  { background: #fcf8e3; margin:0px 0px 0px 0px; font-weight: bold; font-size: 16px; vertical-align: middle;}
a:link  { font-weight: bold; margin:0px 0px 0px 0px; font-size: 16px; vertical-align: middle; }
  }
But, as you can see, "Hover" is going outside of the top green line...it looks a little bit centered below the line itself...how can i manage it? I've tried to use margin 0px, but is not working...

And also: is there a way to enlarge the "usable" part fo this top menu? If I'm increasing the text more than 16px, the menu itself is moving below the green line...

Thanks

Paolo

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1675
Joined: Tue Jun 30, 2020 12:17 pm

Re: Template HelixUltimate: CSS Issue

Post by Pavel-ww » Sun Apr 07, 2024 11:07 am

Phala wrote:
Sun Apr 07, 2024 9:40 am

the string I've used:

Code: Select all

div.sp-column.d-flex.justify-content-end.align-items-center { 
a:hover { background: #556a29; margin:0px 0px 0px 0px; font-weight: bold; font-size: 16px; vertical-align: middle;}
a:active { background: #fcf8e3; margin:0px 0px 0px 0px; font-weight: bold; font-weight: bold;
	font-size: 16px; vertical-align: middle;  }
a:visited  { background: #fcf8e3; margin:0px 0px 0px 0px; font-weight: bold; font-size: 16px; vertical-align: middle;}
a:link  { font-weight: bold; margin:0px 0px 0px 0px; font-size: 16px; vertical-align: middle; }
  }
Hi.

1) The use css nesting is still too early, since not all browsers support and it does not make sense in the context of your work.

2) Your code has no accurate focus on the top navigation, but will be applied to any <a> tag located inside sp-column... . For accurate aiming and determining the correct selectors, use your browser Dev Tools.

Stylization of :active, :visited, :link pseudo classes is relevant only for simple links on the whole site, but not for top navigation.

Here is the code that should be instead of yours.

Code: Select all

.sp-megamenu-parent>li>a,
.sp-megamenu-parent>li>span {
    font-size: 16px;
    font-weight: bold;
    padding: 0 15px !important;
}
.sp-megamenu-parent>li>a:hover,
.sp-megamenu-parent>li>span:hover {
    background: #556a29;
}
.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active>span {
    background-color: #fff;
}

3) The code correcting your problem with the position of "hover"

Code: Select all

#sp-header .logo {
	display: flex;
}

Phala
Joomla! Intern
Joomla! Intern
Posts: 64
Joined: Wed Nov 22, 2023 8:22 pm

Re: Template HelixUltimate: CSS Issue

Post by Phala » Mon Apr 08, 2024 6:50 pm

Thank you very much Pavel-ww, very kind, it's working.
2) Your code has no accurate focus on the top navigation, but will be applied to any <a> tag located inside sp-column... . For accurate aiming and determining the correct selectors, use your browser Dev Tools.
I'm using FF as broswer, and I'm already using the tool to develop the web site, to determinate the correct sector, where I would like to modify, but I didn't found the section you used sp.megamenu, but only these three:
div#sp-menu.png
div.sp-column.png
header#sp-header.png
Thanks again

Paolo
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1675
Joined: Tue Jun 30, 2020 12:17 pm

Re: Template HelixUltimate: CSS Issue

Post by Pavel-ww » Tue Apr 09, 2024 7:15 am

Phala wrote:
Mon Apr 08, 2024 6:50 pm

I'm using FF as broswer, and I'm already using the tool to develop the web site, to determinate the correct sector, where I would like to modify, but I didn't found the section you used sp.megamenu, but only these three:
Hi. You use Dev Tools not at the proper level.


Here is a small master class:

Let's say you want to change the appearance of the menu items in the usual state.

To do this, highlight the desired element, check that in the HTML code the element that you need is chosen correctly, copy its CSS code and change it as you need.

Tip: First, you can change CSS right inside Dev Tools to clearly see the changes. And only after that, copy the code.
1.jpg
--


The the hover state:

Press the States button, activate the hover state сhekbox and you get CSS code.
2.jpg
--


The the active state:

Highlight the active element and get its CSS
3.jpg
You do not have the required permissions to view the files attached to this post.


Post Reply

Return to “Templates for Joomla! 4.x”