Hi,

And how do i adjust the css?
I mean: it says: your css here…; how and where do i place the font name ( and size ) and the color?

To adjust the style of the link, you can use this css code in the Enfold > General Styling > Quick CSS field:

.go-back-link {
   color: red;
   font-size: 16px;
   font-family: 'Calibri', sans-serif;
}

Best regards,
Ismael

Hey lelouxwebdesign,
In your sidebar add a Custom HTML widget with this code:
<a href="javascript:history.back()">Go Back</a>

then in the post sidebar you will see a “Go Back” link

you can style it as you wish and clicking it will send the visitor to the last page they viewed.
If you want to use a button, you can create a buton with the shortcode wand and use this as the manual link: javascript:history.back()

[av_button label='Go Back' icon_select='yes' icon='ue831' font='entypo-fontello' button_type='' link='manually,javascript:history.back()' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']

Best regards,
Mike

Hey Daniela,
I recommend creating a dotsmenu as described in our documentation and create the simple custom menu in the element:

with the custom class dotsmenu:

then to use entypo-fontello icons, go to your icon element and hover over the icons that you want to use and the chrcode will show, always drop the first “U”, so the code that you will use for this screenshot will be \e804

Then use this css, at teh bottom you will see the six icons for the six menu items in my example, add more if you wish:

#top .dotsmenu {
  background: transparent;
  position: fixed!important;
  right: 10px;
  top: 50%!important;
  transform: translateY(-50%);
  border: none!important;
  max-width: 30px!important;
}

#top .dotsmenu .av-subnav-menu > li {    
    display: inline!important;
    margin: 10px !important;
}

#top .dotsmenu .av-subnav-menu li a {
  max-width: 40px;
  max-height:45px;
  border-radius:0; 
  overflow:hidden;
  padding: 0 !important;
  border: none!important;
  background: transparent;
}

#top .dotsmenu .av-subnav-menu li a .avia-bullet {
  display: none !important;
}
#top .dotsmenu .av-subnav-menu li a .avia-menu-text { 
visibility: hidden;
}

@media only screen and (max-width: 767px) {
.responsive #top .dotsmenu {
  background: transparent;
  position: fixed!important;
  right: 0;
  top: 50%!important;
  transform: translateY(-50%);
}}
#top .dotsmenu .av-subnav-menu li a:before {
 display: inline-block !important;
 font-size:30px;
 color: #fff;
}
#top .dotsmenu .av-subnav-menu li:nth-child(1) a:before {
  content: '\e804';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(2) a:before {
  content: '\e82a';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(3) a:before {
  content: '\e83d';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(4) a:before {
  content: '\e8b3';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(5) a:before {
  content: '\e8d2';
  font-family: 'entypo-fontello';
}
#top .dotsmenu .av-subnav-menu li:nth-child(6) a:before {
  content: '\e8b9';
  font-family: 'entypo-fontello';
}

This is the result:

Best regards,
Mike

Hey Erin,

Thank you for the inquiry.

By default, the content in the footer inherits the default font size. If you wish to adjust it, you can use this code in the Quick CSS field:

#footer, #footer p, #footer li {
    font-size: 0.8em;
}

Best regards,
Ismael

Hey Aleksandra,

Thank you for the inquiry.

Have you tried selecting a different font? You can adjust this in the Enfold > General Styling > Fonts tab. You can also modify the default content font size for various screen sizes in the Typography tab.

Best regards,
Ismael

Hi,

This CSS is applying:

@media only screen and (min-width: 767px) {
  h1.av-special-heading-tag {
    font-size: 140px !important;
  }
}

Try removing the !important part, then use this CSS:

#boelge h1 a {
  font-size: 200px;
}

Best regards,
Rikard

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .all_colors h3 .span-reading-time {
	font-size: 12px;
}

and adjust the font size to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey dburton77,
Thank you for the link to your site, for the max-width 767px the heading row is hidden and the pseudo-element :before is used so the heading is stacked instead of being in a single row.
To style the pseudo-element try this css:

@media only screen and (max-width: 767px) {
    .responsive .avia_responsive_table .avia-data-table td:before {
        color: #0097ff;
        font-weight: 600;
        font-size: 17px;
        font-style: normal;
    }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey tonyiatridis,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_header_sidebar #header .av-main-nav > li > a .avia-menu-subtext {
    font-size: 16px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
adjust the font size to suit and clear your browser cache

Best regards,
Mike

Hey -wol-,

Thanks for the login details. 13px is the default theme setting, did you try to activate and change the Default Content Font Size option under Enfold->General Styling->Typography to see if that helps?

Best regards,
Rikard

Hey schweg33,
Thanks for the link to your page, in your css above you have the color: color: #ff0000; to have a white text please use: color: #fff; you also need to add .main_color a to override the theme color, so the solution is:

.main_color a.my-link-class {
background-color: #ff3a2d;
-webkit-border-radius: 33px;
-moz-border-radius: 3px;
color: #fff;
font-size: 16px;
padding: 7px 15px;
}

since this element only shows on mobile you can not have a mouse-over as touch devices don’t use a mouse-over.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#av-burger-menu-ul ul.sub-menu ul.sub-menu .avia-menu-text {
  font-size: 20px;
}

After applying the css, please clear your browser cache and check.Feel free to adjust the size to suit.

Best regards,
Mike

Hi,

Please try this CSS as well:

#av-burger-menu-ul ul.sub-menu ul.sub-menu a {
  font-size: 16px;
}

Best regards,
Rikard

Hey Meetx,

Thank you for the inquiry.

1-2) Please add this css code to adjust color of the icon on hover and make it bigger on mobile view.

.html_bottom_nav_header #top .av_seperator_big_border .av-main-nav>#menu-item-search:hover a {
    color: red;
}

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .menu-item-search-dropdown>a {
    font-size: 32px;
    margin-right: 20px;
  }
}

Best regards,
Ismael

Hey joshuati,

Thank you for the inquiry.

This is possible, but there won’t be enough space for the menu items. We may need to decrease the size of the logo or the font size of the menu items. If that is acceptable, you can start with this css code:

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

  /* Add your Mobile Styles here */
  .responsive #top .av-main-nav .menu-item-avia-special {
    display: none;
  }

  .responsive #top .av-main-nav .menu-item {
    display: inline;
  }

  .responsive .logo img,
  .responsive .logo svg {
    margin: 0;
    max-height: 40px !important;
    margin-left: -20px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

1. The Cart and Search buttons a little larger

You can add this css code to make the cart and search icons larger:

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

  /* Add your Mobile Styles here */
  #menu-item-shop .cart_dropdown_link {
    font-size: 24px;
  }

  #top #menu-item-search a:before {
    font-size: 30px !important;
  }
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Thank you for the update.

Try to replace the selector “.home” with “.page-id-362”.

.page-id-362 .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Please make sure to purge the cache before checking the page.

Best regards,
Ismael

Hi,

Thanks for the update. If you only want the CSS to apply to the home page, then you can use this instead:

.home .av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Best regards,
Rikard