Hi,

Thanks for the update. Please try this CSS to make the icon larger:

.cart_dropdown_link span {
    font-size: 40px;
}

Best regards,
Rikard

Hi,

Thank you for the update.

You can either trim the content to decrease the height of the container, or adjust the font size of the text inside.

.wpcs_content_main p, .wpcs_content_main li {
	font-size: 10px;
	line-height: 2em;
}

You can also adjust the padding around the content and remove the minimum height from the following css modification.

#wpcs_content_inner_8438 {
	padding-top: 10!important;
	margin: 0px !important;
	border: none !important;
}

div#wpcs_content_inner_8438 {
    display: none;
    max-width: 100%;
    min-height: 0;
    background: #fcfcfc;
    padding: 20px 20px 20px 20px;
    margin: 60px 40px 60px 40px;
    color: #666666;
    border: 1px solid #ffffff;
}

Then adjust the bottom position of the pseudo element.

#wpcs_content_inner_8438::after {
	content: '';
	background: url("/../../wp-content/uploads/2017/12/footer_figures_bg.png");
	width: 190px;
	height: 130px;
	position: absolute;
	bottom: 0;
}

Best regards,
Ismael

Hey Fabienne,

Thank you for the inquiry.

You can increase the size of the social icons in the top header with css. Please try this code in the Quick CSS field or the child theme’s style.css file.

#top .social_bookmarks li a {
	line-height: 30px;
	text-align: center;
	font-size: 18px;
}

And you can also change the color of a specific social icon using this css pattern.

#top #wrap_all .av-social-link-linkedin a {
    color: #fff;
    background-color:#419cca;
}

The css code above will adjust the color of the linkedin social icon.

NOTE: Please don’t forget to toggle the Performance > File Compression settings after adding the code.

Best regards,
Ismael

Hi,

Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:

.home .slide-loop-1 h3 a {
  font-size: 22px; 
}

Best regards,
Rikard

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#menu-item-5112 > a > .avia-bullet,#menu-item-5153 > a > .avia-bullet,#menu-item-5111 > a > .avia-bullet {
	display: none !important;
}
#menu-item-5112 > a > .avia-menu-text,#menu-item-5153 > a > .avia-menu-text,#menu-item-5111 > a > .avia-menu-text {
	font-size: 17px !important; 
    line-height: 1.1em !important; 
    font-weight: 900 !important; 
}
#menu-item-5112 > a ,#menu-item-5153 > a ,#menu-item-5111 > a  {
	padding-left: 0 !important;
}

Best regards,
Mike

Hey StephanPfluegler,
You can probably get the menu items pretty close by using css to add extra space between the menu groups and changing the font sizes, but each time you add or remove menu items you would need to rewrite the css. The items at the top of the menu would be much tricker, and require some javascript.

Best regards,
Mike

Hey Kurt,
Sorry for the late reply and thanks for the login, I adjusted your css from this:

p.update-time {
    width: 340px;
    margin: auto;
    font-size: 90%;
}

to this:

@media only screen and (min-width: 767px) { 
p.update-time {
    width: 300px;
    font-size: 90%;
    float: right;
}
}
@media only screen and (max-width: 766px) { 
p.update-time {
    width: 340px;
    margin: auto;
    font-size: 90%;
}
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, the css on the CodePen page had to be adjusted because it didn’t account for other css included on the page with a higher specificity. I have combined the html and the css to be used within a code block element, just copy all of this code and add to a code block element and it should work fine.

<style>
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
  color: #333;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
  color: #333;
}

.dropdown-text,
#top #main ul.dropdown-content a {
  color: #333; 
  text-shadow: 0 1px #fff;
}

#top #main input.dropdown-toggle[type='text'] {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
  color: #333; 
}

#top #main input.dropdown-toggle[type='text']:focus {
  outline: 0;
}

#top #main ul.dropdown-content  {
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

#top #main ul.dropdown-content a {
  display: block;
  text-decoration: none;
}

#top #main ul.dropdown-content a:hover {
  background: #e8e8e8;
}


#top #main input.dropdown-toggle[type='text']:hover ~ .dropdown-text,
#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-text {
  box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

#top #main ul.dropdown-content:hover,
#top #main input.dropdown-toggle[type='text']:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

</style>

<p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>

<div class="dropdown">
  <input class="dropdown-toggle" type="text">
  <div class="dropdown-text">Account</div>
  <ul class="dropdown-content">
    <li><a href="#">Settings</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</div>

expected results:

Best regards,
Mike

Hey hansblancke,

Please try to add important after your statement:

#top h3 {
  font-size: 21px !important;
}

If that doesn’t work then please post admin login details in private so that we can have a closer look.

Best regards,
Rikard

Hi,
Sorry for the late reply to change the button font size and color please adjust your custom css, please look for:

.avia-menu-text {
    font-size: 14px !important;
    color: #777777 !important;
    font-weight: normal !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

to remove the border, try adding this css:

#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    border-color: transparent !important; 
}

to remove the red background for your sub-menu items please adjust your custom css, please look for:

#menu-item-11106 .avia-menu-text {
background-color: #6A1A35 !important;
}
#menu-item-11105 .avia-menu-text {
background-color: #8D5560 !important;
}

and change to:

#menu-item-11106 > .avia-menu-text {
background-color: #6A1A35 !important;
}
#menu-item-11105 > .avia-menu-text {
background-color: #8D5560 !important;
}

Best regards,
Mike

Hi,

Sorry for the delay. You should be able to replace the default text with a close (x) icon using this css code.

.btn-default.mfp-close {
	text-indent: -9999px;
        right: -100px;
        overflow: visible;
}

.btn-default.mfp-close::before {
	content: 'x';
	position: absolute;
	top: 0;
	left: 0;
	color: blue;
	width: 40px;
	height: 40px;
	font-size: 16px;
	text-indent: 0;
}

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