Hello,
Thank you, the social button appeared again.

About the menu, before (the update) I had set a main menu and a secondary menu. The secondary menu has too many elements, and in a mobile device does not looks good. So my client wanted to have a different menu for the mobile version, in order to do this I decided to use some CSS, using this code:

@media only screen and (max-width: 767px) {
.hide-on-mobile { display: none !important; }}
@media only screen and (min-width: 768px) {
.hide-on-desktop { display: none !important; }}

In this way I could hide elements in both menus for showing elements only for mobile and others only for desktop, using the CSS Classes field in Menus. http://i.imgur.com/l1fVK0v.png
After the update, this CSS does not work in the mobile main menu, but it still does work in the secondary menu and in all menus in desktop version.

Here I can show you the main and secondary menu in the desktop website http://i.imgur.com/r9L5MvG.jpg
But in the mobile site, all elements are displayed in the main menu. http://i.imgur.com/734Gdjg.jpg

Thank you!

I have found the cause of the problem in the custom css file…its the first nav-wrap rule, I tried to add the same to mobile styles but with #2f3393 and !important…no change…removed to copy and paste code here.

I cant find any burger related rules in quick css or additional css…below is the css found in the “custom css” file

/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* General Custom CSS */

.av-main-nav-wrap ul * {
   color: #fff;
}
#header_main_alternate {
     background-color: #2f3393;
}
#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
 background-color: #00aeed;
}
.header_color .avia-menu-fx {
   border-bottom-color:  #00aeed;
   background-color:  #00aeed;
}

.av-main-nav-wrap ul.sub-menu * {
   color: #2f3393;
}

#header_main{
border-bottom-width: 0px !important;
border-bottom-style: solid;
z-index: 1;
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

}

This is the only issue preventing the site to go live now…please help! :D Thanks

The mobile logo looks good now but now without that extra padding the desktop logo isnt centered vertically as you can see here:
https://ibb.co/nhFfLF

I found your other post to use this:
.html_header_top.html_logo_center #top .main_menu ul:first-child {
display: inline-block;
width: auto;
}

But why did this change and will it be fixed so you don’t need the coding?

I got it to work but have one more question

– how do I add padding around the text section below each image?

eg to the left, right, top and bottom of

our super fun Boomerang GIF Booth takes a series of quick shots and strings them together in an awesome clip that plays forwards and backwards. it’s crazy fun

our premium photo booth boasts gorgeous professional studio lighting, 32″ interactive touchscreen, high quality props, fast on-the-spot prints, custom templates, instant social media sharing+++

our one-of-a-kind 3D Selfie Booth uses a new technology called Boomarray to create cool 3D motion effects bringing your selfies to a whole-notha-level

Please note the padding should ONLY be applied to the text and button below the images and NOT around the images

• This reply was modified 8 years, 9 months ago by navindesigns.

Hi John!

Got it fixed with a code from the this thread.

Thanx