Hi Ismael,

thanks for your answer.

I did not. That’s the part which is strange.
I put this quick css in – see below. .

Before I put anything new into quick css – I’d like to get into the bottom of this problem.
KR
Tanju
.main_color tr:hover
{​​​​​
color:#FFF;
background: #000 !important;
}

.slideshow_caption { width: 60%;}
.avia-caption-title {
position: relative;
top: -40px;
}
.avia-caption-content {
position: relative;
top: -40px;
}

@media only screen and (max-width: 767px) {
.responsive #top #scroll-top-link {
display: block;
}
}

#header_meta .avia_wpml_language_switch { display: none; }

@media only screen and (max-width: 1112px) {
.menu-item {
display: none;
}
.main_menu {
display: block !important;
}
.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}

div .av_one_fourth {
margin-left: 2%;
width: 34%;
}

.avia-promocontent * {
font-size: 20px!important;
}

#top .av_promobox .avia-button .avia_iconbox_title {
font-size: 20px;
}

#footer .container {
max-width: 95% !important;
}

#top .av-large-testimonial-slider .avia-testimonial-meta {
float: left;
}

.special-heading-border {
display:none !important;
}

Hey there

Sorry I thought they were all footer related so thats why I did them all – but note taken for future :-)

Also dont worry about the “How can I reduce the Gap top and bottom of entire footer section inner padding?” I have found some code to fix that myself now. Which also seems to have helped with this questio “How can I reduce the gap between columns when they are stacked on mobile?” too.

I cant see any issues – here is the quick css:
/* remove the meta container from blog page*/
.html_elegant-blog #top .post-entry .post-meta-infos {
display: none;
}
/* remove the category displaying on blog page*/
.html_elegant-blog #top .avia-content-slider .blog-categories {
display: none;
}

/* Remove Product sorting from Product pages*/
.product-sorting { display: none !important;
}

/* Product price*/
#top .price, #top .price span, #top del, #top ins{
display: inline;
text-decoration: none;
font-size: 17px;
line-height: 45px;
font-weight: 600;
letter-spacing: 0.5px;
}

.image-overlay {background: none;
}
.av_font_icon.av-icon-style-border .av-icon-char {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border-radius: 1000px;
border-width: 2px;
border-style: solid;
display: block;
margin: 0 auto;
padding: 25px;
color: inherit;
border-color: inherit;
position: relative;
}

/* Centre 5 stars in testimonials*/
.avia-testimonial p[style*=”center”] {
margin-top: 0;
display: inline-block;
}

.avia-testimonial-meta-mini {
text-align: center !important;
}

/* Reduce gap above header on events calendar – what’s on page*/
.tribe-common–breakpoint-medium.tribe-events .tribe-events-l-container {
padding-top: 0;
}
.tribe-events .tribe-events-l-container {
padding-top: 0;
}

#top #reviews h2{
font:”HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
line-height: 25px;
font-weight: normal;
text-transform: none;
letter-spacing: 1px;
}

.big-preview.single-big {
text-align: center; }

.big-preview.single-big a {
display: inline-block; }

.woocommerce-review__published-date {
display: none !important;
}

.html_elegant-blog .avia-content-slider .slide-meta {
display: none !important;
}

/* IconList space-*/
#top .av-iconlist-small li {
margin: 10px 0;
}

/*reduce the gap between Icon list and the text block above it*/
.avia-icon-list-container {
margin: 10px 0 30px 0;
}

/*reduce the gap between text box and colour section*/
.content {
padding-top: 22px;
padding-bottom: 20px;
}

@media only screen and (max-width: 767px) {

/* Add your Mobile Styles here */
/* Social icons 5 column display on mobile to stop overlaping */
@media only screen and (max-width: 767px) {
.flex_column.av-1wutg6-75a2def9a5e4dfdd6a7dc4b173f7d740 {
display: none;
}
.responsive #top.page-id-734 #wrap_all .content .entry-content-wrapper .flex_column.av_one_fifth {
width: 33%;
}

/* increase width of testimonial slider on mobile */
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0;
}
#top .av-large-testimonial-slider .avia-testimonial-meta .avia-testimonial-image {
width: 100%;
}
#top .av-large-testimonial-slider .avia-testimonial-meta-mini {
text-align: center;
}

/* Scroll to top button on mobile */
.responsive #scroll-top-link {
display: block !important;
}

And there is also the Advanced styling for the Widgets titles.

• This reply was modified 11 months, 1 week ago by xfacta.

I think this is better.
I tryed my side it works
Best regards,
James

/* ———————————— */
/* ——- WIDGET MENU ——- */
/* ———————————— */
#top .widget ul {
font-size: large;
line-height: 121%;
}
/* —— personalize current page appearence —— */
#top .widget ul li.current_page_item {
background: url(“icon.png”) left no-repeat;
padding-left: 14px;
font-weight: 900;
}
/* link appareance of current page */
#top .widget ul li.current_page_item a,
#top .widget ul li.current_page_item a:hover {
background-color: #c7eafc;
padding: 0 4%;
border-radius: 9px;
}
/* —— HOVER links appareance (but current page) —— */
#top .widget ul a:hover {
background-color: gold;
padding: 0 4%;
border-radius: 9px;
}
/* deleting background color */
#top .widget ul.children a {
background-color: transparent;
padding: 0;
border-radius: 9px;
}

Hi Mike,
Thank you.
Yes, I finally found the solution on my own ;-)

I post here my CSS.
I know this can be improved.
However it could be usefull for other users that read this post so i hope this could help.

Best regards
James

/* ———————————— */
/* ——- WIDGET MENU PERSONALIZE ——- */
/* ———————————— */

#top .widget ul {
font-size: large;
line-height: 121%;
}

/* —— personalize current page link —— */
/*—- adding icon for current page link —- */
#top .widget ul li.current_page_item {
background-image: url(“icon.png”);
background-position: left;
background-repeat: no-repeat;
padding-left: 14px;
font-weight: 900 !important;
}

/*—- adding specific background color for current page —- */
/*—- and adding little spacing between letters —- */
#top .widget ul li.current_page_item a {
background-color: #c7eafc;
padding: 0% 4% 0% 4%;
letter-spacing: 0.007em;
border-radius: 9px;
}

/* — HOVER – adding background color for current page — */
#top .widget ul li.current_page_item a:hover {
background-color: #c7eafc;
padding: 0% 4% 0% 4%;
letter-spacing: 0.007em;
border-radius: 9px;
}

/* —— HOVER – appearence for all links (but current page) —— */

#top .widget ul a:hover {
background-color: gold;
padding: 0% 4% 0% 4% !important;
letter-spacing: 0.007em;
border-radius: 9px;
}
#top .widget ul.children inherit a {
background-color: none;
padding: 0%;
border-radius: 9px;
}

Hi Rikard,

I followed your advice and it works quite well thank you, but I cannot format the link of the current page appearing in the menu widget.

I started a topic about this :

Currently the “current page link” appear in black but i would like to change it as i wish (like background color, font size,…).
I know it’s a simple CSS to add but I don’t know to do it.

Can you help me with this?

Best regards,
James