Quantcast
Channel: Joomla! Forum - community, help and support
Viewing all articles
Browse latest Browse all 1435

Templates for Joomla! 4.x • Re: Template HelixUltimate: CSS Issue

$
0
0

the string I've used:

Code:

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:

.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:

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

Statistics: Posted by Pavel-ww — Sun Apr 07, 2024 11:07 am



Viewing all articles
Browse latest Browse all 1435

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>