Hi Ismael,

thanks for your help! I had some issues with overlays but after some tweaks, it’s just working fine! I also managed to add the Search Icon when the burger menu is visible. I quote the code in case it may be of help :-)

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

@media only screen and (min-width: 435px) {
.av-hamburger strong {
display: block;
position: absolute;
left: -115px;
top: -42px;
text-transform: uppercase;
font-size: 34px;
}}

@media screen and (max-width: 1380px) and (min-width: 490px) {
#top #menu-item-search {
    display: block !important;
    right: 80px;
}}

@media screen and (max-width: 491px) and (min-width: 435px) {
#top #menu-item-search {
    display: none;
}
}

I have the really last question to ask you: how can i set the burger word “MENU” in a responsive way?
Let me explain better: when I scroll down the browser window (between the resolution range 1090 px – 1523 px) the word “MENU” is not responsive, it just sticks at the top. It doesn’t align with other elements like Search Icon and Menu Icon. I tried to change the position values but nothing changed.

Please find the screenshotted issue on the private content area.

This is the code I’m currently using:

@media only screen and (min-width: 435px) {
.av-hamburger strong {
display: block;
position: absolute;
left: -115px;
top: -42px;
text-transform: uppercase;
font-size: 34px;
}}

Sorry to bother you again and thanks in advance for your time.

Fabio

• This reply was modified 7 years, 7 months ago by MontanariGiulio.

Hi Ismael,

Thanks for that – I have inserted the debug mode code into my functions.php file as per the instructions you have provided. Below is the copy/paste I got from the ‘Default Editor’ option (not sure if that is what debug mode is) – I tried to edit the code but it came back weird after that (there were no edges around the content) so I reverted the changes.

[av_section min_height='75' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='no-border-styling' scroll_down='aviaTBscroll_down' id='' color='main_color' custom_bg='' src='http://kriesi.at/themes/enfold-startup/files/2015/02/pricing_big.jpg' attachment='496' attachment_size='full' attach='parallax' position='top center' repeat='stretch' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.7' overlay_color='#4ecac2' overlay_pattern='' overlay_custom_pattern='']
[av_one_fifth first]

[/av_one_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat']

[av_heading heading='NO CONTRACTS. NO LOCK INS. NO BULL TURDS. SIMPLE - EFFICIENT <strong>PAY AS YOU GO</strong> LOCAL PROFESSIONAL WEB DEVELOPMENT. DON’T PAY A CENT MORE.' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='10' color='custom-color-heading' custom_font='#ffffff'][/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='40px' custom_margin_bottom='40px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[/av_three_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat']

[/av_one_fifth]
[/av_section]

[av_submenu which_menu='custom' menu='2' position='center' color='main_color' sticky='aviaTBsticky' mobile='active']
[av_submenu_item title='Top' link='manually,#top' linktarget='' button_style='']
[av_submenu_item title='Pricing' link='manually,#pricing' linktarget='' button_style='']
[av_submenu_item title='FAQ' link='manually,#faq' linktarget='' button_style='']
[av_submenu_item title='Pre Sale Questions' link='manually,#pre-sale' linktarget='' button_style='av-menu-button av-menu-button-bordered']
[/av_submenu]

[av_section min_height='' min_height_px='500px' padding='default' shadow='no-border-styling' bottom_border='no-border-styling' id='pricing' color='main_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='']

[av_table purpose='pricing' pricing_table_design='avia_pricing_minimal' pricing_hidden_cells='avia_show_empty_cells' caption='' responsive_styling='avia_responsive_table']
[av_row row_style='avia-heading-row'][av_cell col_style='']In 'n' Out[/av_cell][av_cell col_style='']Regular[/av_cell][av_cell col_style='avia-highlight-col']Plus[/av_cell][av_cell col_style='']Enterprise[/av_cell][/av_row]
[av_row row_style='avia-pricing-row'][av_cell col_style='']$80<small>per hour</small>[/av_cell][av_cell col_style='']$60<small>per hour</small>[/av_cell][av_cell col_style='avia-highlight-col']$55<small>per hour</small>[/av_cell][av_cell col_style='']$45<small>per hour</small>[/av_cell][/av_row]
[av_row row_style=''][av_cell col_style='']For small projects under 10 hours[/av_cell][av_cell col_style='']For small projects under 10 hours[/av_cell][av_cell col_style='avia-highlight-col']For medium/large projects over 10 hours[/av_cell][av_cell col_style='']For medium/large projects over 10 hours[/av_cell][/av_row]
[av_row row_style=''][av_cell col_style='']Priority Phone/Email support[/av_cell][av_cell col_style='']Email Support[/av_cell][av_cell col_style='avia-highlight-col']Priority Phone/Email support[/av_cell][av_cell col_style='']Email Support[/av_cell][/av_row]
[av_row row_style=''][av_cell col_style='']24 Hour Turnaround Time[/av_cell][av_cell col_style='']3 Day Turnaround Time[/av_cell][av_cell col_style='avia-highlight-col']24 Hour Turnaround Time[/av_cell][av_cell col_style='']3 Day Turnaround Time[/av_cell][/av_row]
[/av_table]

[/av_section][av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='no-border-styling' id='faq' color='main_color' custom_bg='#fcfcfc' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='']
[av_one_fifth first]

[/av_one_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat']

[av_heading tag='h1' padding='10' heading='Frequently Asked Questions' color='' style='blockquote modern-quote modern-centered' custom_font='' size='40' subheading_active='' subheading_size='15' custom_class=''][/av_heading]

[/av_three_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat']

[/av_one_fifth][av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='70px' custom_margin_bottom='70px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[av_one_half first]

[av_textblock size='' font_color='' color='']
<h4>What if I buy 10 hours but don’t use all the hours in my project?</h4>
[av_dropcap1]W[/av_dropcap1]ell I have good news for you - if you can send me an email confirming you will not have any work in the future and request a partial refund - you will receive a payment back for the hours you don’t use. Pretty neat right? You can also keep the hours left as credit for projects in the future.
<h4>Can we meet for a coffee to discuss?</h4>
[av_dropcap1]I[/av_dropcap1] believe in modelling those that are successful - one of the people I look up to is author Tim Ferris from the book ‘The 4 Hour Workweek’. We live in a connected world of Skype, WhatsApp, FB and join.me - I expect my clients to understand or make a serious effort in being connected - and you will find the rewards immense and be able to accomplish a lot more in a much shorter time span.
<div>While I do meet face to face with clients occassionally on larger projects ($6K+) - the majority of my client work is conducted online - so the short answer is no.
[/av_textblock][/av_one_half][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat'][av_textblock size='' font_color='' color='']
<h4>How much for a website?</h4>
[av_dropcap1]L[/av_dropcap1]ooking back at my clients for the last 6 years no good relationship has ever started with the question ‘How much is a website’ - however I feel it’s a fair quesiton so I will answer as best I can.

The cheapest website I’ve ever made was $350 and the most expensive was about $22,000.

If you are looking for a quote and have a budget of $1,600+ I can review your requirements and give you a fixed price - however if your budget is under that then I can give you an estimate of how much time your project would require in hours - you can get a pretty decent looking website for $500 if you agree to write the content and buy the theme/hosting.
<h4>Do you do SEO?</h4>
[av_dropcap1]I[/av_dropcap1]’m currently on Page #2 for the highly competitive term ‘wordpress developer sydney’ - which I have been steadily climbing since the start of this year.

If you provide your Google Analytics/Google Webmaster Tools I can review your website and give a recommendation for how I can help - you might want to do that before I get to Page #1 because once I do my rates for SEO will go up substantially.

</div>
[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='no-border-styling' id='pre-sale' color='main_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='']
[av_one_fifth first]

[/av_one_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat']

[av_heading heading='HAVE MORE QUESTIONS? SEND THEM THIS WAY! I’M <strong>ALWAYS AVAILABLE TO ANSWER YOUR ENQUIRIES</strong> AND START A DIALOGUE - BEGIN WITH THE FORM BELOW' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='10' color='' custom_font=''][/av_heading]

[/av_three_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat']

[/av_one_fifth][av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='70px' custom_margin_bottom='70px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[av_contact email='' title='' button='Submit' on_send='' sent='Your question has been sent, we will reply as soon as possible!' link='manually,http://' subject='Pre Sale Question' autorespond='' captcha='' color='']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='element_third'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='element_third'][/av_contact_field]
[av_contact_field label='Which Plan?' type='select' options='Starter, Regular, Plus, Enterprise' check='' width='element_third'][/av_contact_field]
[av_contact_field label='Subject' type='text' check='is_empty' options='' width=''][/av_contact_field]
[av_contact_field label='Message' type='textarea' check='is_empty' options='' width=''][/av_contact_field]
[/av_contact]
[/av_section]

Also don’t forget the question about the menu I put down above:

Also is there a way to make the header menu be small from the get go instead of get large then smaller?
https://cl.ly/d2b9494adadc/Image%2525202018-09-11%252520at%25252012.43.47%252520PM.png
https://cl.ly/77bd973e7521/Image%2525202018-09-11%252520at%25252012.44.28%252520PM.png
screenshots above are from this page: http://www.headstudios.com.au/sample-landing-page/

Thanks for all your help!

Hi Vinay,

Thanks, in the end I managed to get pretty much what I wanted with your resources and forum.

Just a little extra, can you tell me what code to add to the quick css below to increase the space between the image and the title of the catalog item.
( please find in private content example and page url

thanks very much in advance
Kind regards
Stan

.av-catalogue-title {
font-size: 23px;
color: #c41546;
}
.av-catalogue-image {
border-radius: 200px;
width: 166px;
float: none;
margin: 0 auto;
display: block;
}
@media screen and (max-width: 767px) {
.av-catalogue-price {
position: relative;
}

.av-catalogue-title-container {
text-align: center;
}

.av-catalogue-title {
padding-right: 0;
}

.av-catalogue-content {
text-align: center;
padding: 0;
}
}
.av-catalogue-list li:first-child {
border-top: 1px;
}

.av-catalogue-list li {
background: #ffffff;
border: 10px solid #c4bab8;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
}

Hey Rikard,

thanks for your code, it worked like a charm!

I’m so sorry to bother you again but I’m facing a new issue:

I added “MENU” text near the MENU button on mobile. I would like to show up the search icon on the left of the word “MENU”. Unluckily the search icon box overlay the text and it isn’t clickable at all (link 1 and link 2).

I would also love to know if it’s possible to show the big Search Icon up to the max resolution set on the mobile menu (it disappear when the browser window is wider than 1087 px – link 3).

The Quick CSS I’m using:

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

@media only screen and (min-width: 435px) {
.av-hamburger strong {
display: block;
position: absolute;
left: -115px;
top: -42px;
text-transform: uppercase;
font-size: 34px;
}}

Please find in the private content area the screenshots of this issue.

Thank you very much in advance for your time and help, I really appreciate!

Fabio

• This reply was modified 7 years, 7 months ago by MontanariGiulio.

Yeah true. I know those now, but I have not worked with it. So, I don’t know media queries yet..

The screenshot is correct. That one is an issue. Also those on the page Workshops. The 4 columns in different colours. See the link. Do you have an idea also? I thinks colums of 3 is also better? But the customer wants 4. And the Graphical Designer has set some size and height for the font. But if that is a no go, then it is a no go. Not everything is technical seen possible as wished. :)

oftopic: There is also a ticket for the logo. The logo will have a lightbulb, ‘flying’ over the slider. But that one has my collegae here some where with one of your collegaes. It’s becoming a CSS site :) :)

Greetings,

Arjan

That seems to have made the font for the drop down items smaller, if anything, It would be great if they were the same size as the main menu items.

Here is a FRESH PAGE and again a video.
[video src="https://maskenzauber.com/temp/separator-bug.mp4" /]

The bug is totally obvious!

here is the URL for further investigation:

And here is the CODE of the page and you can reproduce it in ANY installation (we tried it.)

[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jlus4uzn' custom_class='' admin_preview_bg='']
<img class="alignleft size-portfolio wp-image-21078" src="https://maskenzauber.com/wp-content/uploads/Profil-Maskenkuenstlerin-495x400.jpg" alt="" width="495" height="400" />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-rw65hm' custom_class='' admin_preview_bg='']

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
[/av_textblock]