Hi,

Thank you for the screenshot.

Are you trying to adjust the style of the text in the embedded code? Please try to start with this css code.

.osBox.osDetail * {
    font-size: 1em !important;
    line-height: 1.5em;
    font-weight: 400 !important;
    color: #636363 !important;
}

.osBox.osDetail * .osButton.osButton-inline {
    text-shadow: none;
    color: #ffffff !important;
}

Best regards,
Ismael

Hi,

Thank you for the update.

The position adjustment seems to be working as expected. If you want to adjust the vertical position of the social icons, try to set the “top” property.

.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
    font-size: 20px !important;
    left: 30px !important;
    top: 40px;
}

Best regards,
Ismael

Hey vantagepointmg,

Thank you for the inquiry.

You can manually insert an image tag or an icon shortcode beside the text in the Navigation Label field of a menu item. The menu can be edited in the Appearance > Menus panel.

Here’s an example of an icon shortcode.

[av_font_icon icon='' style='' caption='' size='40px' position='left' color='' link='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0'][/av_font_icon]

Best regards,
Ismael

Hi,

Thank you for the inquiry.

You can try to adjust the element style with css modification instead. Please try this code in the Enfold > General Styling > Quick CSS field.

.av-magazine .av-magazine-top-bar .av-magazine-top-heading {
    font-size: 2em;
    color: blue;
}

Best regards,
Ismael

Hi,
To correct this try changing the menu width from 14.25% to 13.25% and the padding from zero to 10px left and right. originally I set the padding to zero so you could have a larger font, so by adding the padding below 992px you will need to also reduce the font size so “Get Involved” will fit on one line. It looks like a font size of 14px will fit.
Please try making this adjustment, or adjusting slightly more. Otherwise feel free to include an admin login in the Private Content area below.

Best regards,
Mike

Hi,
To correct the mega menu items please change this part:

.avia-menu>ul.av-main-nav>li.menu-item .avia-menu-text,
.avia-menu>ul.av-main-nav>li.menu-item-search-dropdown {
	display: flex;
    justify-content: center;
}

to this:

.avia-menu>ul.av-main-nav>li.menu-item>a> .avia-menu-text,
.avia-menu>ul.av-main-nav>li.menu-item-search-dropdown {
	display: flex;
    justify-content: center;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
to correct the two words “Get Involved” please try to adjust the font size for the screen width, you will need to go a little smaller when that occurs, it looks like 17px instead of 18px works.

Best regards,
Mike

Hey Celeranttechnologycorp,

Thank you for the inquiry.

You can add this css code to adjust the style of the button. Make sure to replace the Youtube icon with the Play or Right Arrow icon.

#top .avia-button-wrap.av-lnizxc6d-66ff2ca80883e92473e33c8c2dbd9656-wrap .avia-button {
    border-radius: 10px !important;
    line-height: 1em !important;
}

#top .avia-button-wrap.av-lnizxc6d-66ff2ca80883e92473e33c8c2dbd9656-wrap .avia-button .avia_button_icon {
    font-size: 1.5em;
    left: 1em;
    background: #ffffff;
    border-radius: 200%;
    color: red;
    padding: 5px;
}

#top .avia-button-wrap.av-lnizxc6d-66ff2ca80883e92473e33c8c2dbd9656-wrap .avia-button .avia_iconbox_title {
    top: -4px;
}

Unfortunately, you cannot add different css class names for the items in a button row element.

Best regards,
Ismael

Hi,
Thanks for the feedback and the link to your example site, it helped me by seeing what they have done. When I check the site I see the break point for the mobile menu is 992px, and the set the menu item width to 14.25% and the font is a little smaller.
So to show the burger menu until 991px we will use this css:

@media only screen and (min-width: 767px) and (max-width: 991px) {
  #top #header .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header .av-burger-menu-main.menu-item-avia-special  {
      cursor: pointer;
      display: block!important;
  }
  #top #header .av-main-nav > li > a {
  	background-color: transparent !important;
  }
  .html_header_top #top .av_menu_left .main_menu {
    right: 20% !important;
    left: auto !important;
  }
  .html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
    display: block !important;
}
  #top #header_main_alternate {
	 display: none;
}
}

the expected results:

Then to set the main menu similar to the other site we will use this css:

@media only screen and (min-width: 992px) { 
.main_menu {
    display: flex;
    align-items: center;
}
.avia-menu>ul.av-main-nav {
    margin: 0;
    display: flex;
    justify-content: space-around;
    position: relative;
}
.avia-menu>ul.av-main-nav>li.menu-item {
    width: 14.25%;
    padding: 0;
}
.avia-menu>ul.av-main-nav>li.menu-item>a,
.avia-menu>ul.av-main-nav>li.menu-item>a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    font-size: 18px;
}
.avia-menu>ul.av-main-nav>li.menu-item .avia-menu-text,
.avia-menu>ul.av-main-nav>li.menu-item-search-dropdown {
	display: flex;
    justify-content: center;
}
#top #header_main_alternate .container {
    margin: 0 auto;
    padding: 0px 50px;
}
}
@media only screen and (min-width: 1200px) { 
.avia-menu>ul.av-main-nav>li.menu-item {
    margin: 0 13px;
}
}

the expected results 992px:

and at larger screens 1440px:

Please give this a try.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hey Bettina,
Thanks for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.single-post .avia-image-container.avia-align-left {
    margin-right: 0;
}
#top.single-post p > i {
	font-size: 12px;
}

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

Hi,
On the page that you linked to, “Schulmaterialien” is an H1 tag and your CSS is targeting H2 tags, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:

@media only screen and (max-width: 767px) {
  #top #wrap_all #main .header_color h1,
  #top #wrap_all #main .main_color h1,
  #top #wrap_all #main .alternate_color h1 {
    font-size: 24px;
  }
}

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

Hi,

Thanks for that. Please try to set smaller font sizes for the headings in the element settings, under Styling->Font sizes.

Best regards,
Rikard

Hi,

Thank you for the update.

Did you purge the cache before testing the page? You may have to toggle or temporarily disable the Enfold > Performance > File Compression settings as well. Please make sure to perform a hard refresh before testing the page.

The code above should adjust the size of the h1 element. If you want to change the size of the h2 element manually, just copy the css rule above, then replace all instances of the h1 selector.

  #top #wrap_all .header_color h2,
  #top #wrap_all .main_color h2,
  #top #wrap_all .alternate_color h2 {
    font-size: 24px;
  }

Or as suggested above, you can adjust the font size settings in the Enfold > General Styling > Typography panel.

Best regards,
Ismael