Template HelixUltimate: CSS Issue

[Phala]

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

[Pavel-ww]

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]

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

[Pavel-ww]

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