Hello
I’ve looked at tons of posts and have al ot of code but there are two things that are eluding me here, please (I’ve used basic colours to show what is being edited – they are just there as helpers for now).
1) the burger is not centered – it’s off to the right a bit – I’ve tried all sorts of css but can’t seem to get it exactly in the middle.
2) Once the burger is open, I’ve set the li to align top but I want it below the X

Here’s my working code, below. Thanks in advance!

	/* header logo and burger menu **********************************************/
	
	
	/* height of both logo and main menu area */
	
	.responsive #top #wrap_all .container {
	    height: 20px !important;
		background: green !important; /* just to see what elemnt is targetted */		
	}
	  
	.responsive #top .logo, 
	  .responsive #top .logo a {
  		width: 100% !important;
  	    height: auto !important;		
	    display: block !important;
	    margin: 0 auto !important;
		background: red !important; /* just to see what elemnt is targetted */
	  }

	  .responsive #top .logo img {
		padding: 20px !important;
	    margin: 0 auto !important;
	  }
	  
	  /* adjusts the burger within main menu area */
	  
	  .av-main-nav-wrap ul {
	  	top: 0px;
	  }

	  .responsive #top #wrap_all .main_menu {
	    position: static;
		height: auto !important;
	  }

	  .responsive #top .av-logo-container #avia-menu {
	    margin: 0 auto !important;
	    width: 30px !important;				
	  }

	  .responsive #top .av-logo-container .avia-menu {
	    width: 100%;
	    text-align: center !important;
		background: blue !important; /* just to see what elemnt is targetted */
	  }

	  #top #wrap_all #header .av-small-burger-icon a {
	    height: auto !important;
	    line-height: 3 !important;
	  }	
	  
   	/* burger closed */
	
   	.header_color .av-hamburger-inner,
   	.header_color .av-hamburger-inner::before,
   	.header_color .av-hamburger-inner::after {
   		background-color: #fff !important;
   	}
  
      /* burger open */
	
  	#top .header_color .is-active .av-hamburger-inner, 
  	#top .header_color .is-active .av-hamburger-inner::before, 
  	#top .header_color .is-active .av-hamburger-inner::after {
  	    background-color: #fff !important;
  	}
	 
	 /* tweak the vertical position of the menu when open */
 
	 #av-burger-menu-ul {
		 vertical-align: top; /* originally middle */
		 background: black !important; /* just to see what elemnt is targetted */
	 }

	 #av-burger-menu-ul li {
	     text-align: center;
		 padding: 5px 0px !important;
	 }
  
	 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
	 	font-size: 12px;
	 	line-height: 16px;
	  	color: #afa89c !important;
	  }

	 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a:hover {
		color: #fff !important;
	  	opacity: 1 !important;
	  }		 
 
	 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.current-menu-item .avia-menu-text {
	   color: #fff !important;
	 }
 

Hello. I am about to migrate a website to Enfold and I am having some problems with my local tests.

As I have to edit over 3000 posts to use the correct short codes I was trying to use a general code instead.

For example this:

[av_iconlist position='right' iconlist_styling='av-iconlist-small' custom_title_size='' custom_content_size='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='' custom_font='#149ce0' custom_border='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-2o3q6tp' admin_preview_bg='']
[av_iconlist_item title='One: XXXXXXX' link='manually,https://site/tag/one-XXXXXXX/' linktarget='' linkelement='' icon='ue827' font='entypo-fontello' av_uid=''][/av_iconlist_item]
[av_iconlist_item title='Two: XXXXXXX' link='manually,https://site/tag/two-XXXXXXX/' linktarget='' linkelement='' icon='ue827' font='entypo-fontello' av_uid=''][/av_iconlist_item]
[av_iconlist_item title='Three: XXXXXXX' link='manually,https://site/tag/three-XXXXXXX/' linktarget='' linkelement='' icon='ue827' font='entypo-fontello' av_uid=''][/av_iconlist_item]
[av_iconlist_item title='Four: XXXXXXX' link='' linktarget='' linkelement='' icon='ue827' font='entypo-fontello' av_uid=''][/av_iconlist_item]
[/av_iconlist]

Can be done with just this:

<div class="icon-tags">
<a href="#" class="icon tags"> One: XXXXXXX</a>
<a href="#" class="icon tags"> Two: XXXXXXX</a>
<a href="#" class="icon tags"> Three: XXXXXXX</a>
<a class="icon tags"> Four: XXXXXXX</a>
</div>

Having this in my CSS I can replicate the short code icons list.

.icon-tags{
  float:right;
  text-decoration: none;
}

.icon:before {
  display: inline-block;
  font-family: 'entypo-fontello';
  text-decoration: none;
  speak: none;
}

.tags:before {
  content: "\E827";
  color:#ff33cc;
}

That way if you update the theme removing the icon list or I change theme again, I will have no problems like I have right now.

1- Fontello is called when using the short code but it is not when using my HTML. How to fix that ?
2- Do you recommend another way of doing this ?

The same happens to videos, I have 3 videos at the end of each post and I was thinking to use:

[av_one_third first]
[av_video src='http://www.youtube.com/watch?v=XXXXXX' mobile_image='' attachment='' attachment_size='' format='16-9' width='16' height='9' conditional_play='' av_uid='']
[/av_one_third]
[av_one_third]
[av_video src='http://www.youtube.com/watch?v=XXXXXX' mobile_image='' attachment='' attachment_size='' format='16-9' width='16' height='9' conditional_play='' av_uid='']
[/av_one_third]
[av_one_third]
[av_video src='http://www.youtube.com/watch?v=XXXXXX' mobile_image='' attachment='' attachment_size='' format='16-9' width='16' height='9' conditional_play='' av_uid='']
[/av_one_third]

Is there a way to use HTML or other thing so if you remove the short code in the future or I change theme, everything will still works ?

I am trying to avoid future problems I am having right now for changing theme. That way if you remove short codes everything will keep working.

Thank you.

Hi!
Heading of h4 should be on mobile smaller.
How can I set this?

Hi
I’d like to change the font size on my blog posts and blog sidebar to 15.
I found a css code on this support forum that helped me change the blog posts itself;

.post .entry-content p {
font-size: 15px;
}

On my homepage though I have the most recent blog posts displayed partly, but they are still in a larger font (18), and the sidebar on the blog page also has a larger font. How can I change those too?

Thanks!

Elisabeth

hi!
At the bottom of my site I have 2 columns widget are at the footer.
On left side the menu is displayed, on right side a text element with contact information.
I want the text of the left side to have the same formatting (size…) like the text element on the right side.
How can I set this?