Partner Logo On Mobile

Hi,

I added following code to bottom of Quick CSS as well

#footer {
    margin-top: 390px;
}

Please review your website.

Best regards,
Yigit

Hi,

1- I added following code to bottom of Quick CSS field to switch to mobile menu on screens below 1350px

/* Activate burger menu */
@media only screen and (max-width: 1350px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}
@media only screen and (min-width: 990px) {
.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after { 
background-color: white; 
}}

You can adjust container width in Enfold theme options > General Layout > Dimensions tab. Please do not compare footer and header container width to the width of your Grid Row elements as their width is not dependent on container width.

2- Cookies were disabled, I went to Enfold theme options and enabled them. It has the text and Accept and Learn buttons. Attached a screenshot in private content field below.

3- Thanks for adding page ID to target homepage only, I forgot to do that. I am not sure if I understood the issue you are having now though and it is pretty difficult find correct screenshots out of 44 of them :) Could you please delete the ones that are no longer relevant?

Best regards,
Yigit

Hi,

Each time I log in, I am fixing CSS errors. Those fixes make CSS work as expected but also makes CSS conflicts visible. Please ask the person who is adjusting CSS to check their code on http://csslint.net/ for errors :)

1&2&3- I changed the code to following one

@media only screen and (min-width: 990px) {
.header_color.av_header_transparency .av-hamburger-inner, .header_color.av_header_transparency .av-hamburger-inner::before, .header_color.av_header_transparency .av-hamburger-inner::after { 
background-color: white; 
}}
.av-hamburger-box strong {
    display: block;
    text-align: center;
    position: absolute;
}
@media only screen and (min-width: 990px) {
.header_color.av_header_transparency .av-hamburger-box strong {
color: white; 
}}

4- If you would like to switch to 1 column on screens below 990px instead of 767px, please add following code to bottom of Quick CSS field

@media only screen and (max-width: 990px) {
#footer .flex_column {
    width: 100%;
    margin-left: 0;
}}

5- “Home page footer container squeezed different width than other pages (mobile and tablet)” was probably related to broken CSS as it currently shows up fine on my end.

Please review your website.

Best regards,
Yigit

Hi,
Sorry for the very late reply and thanks for the links, for #1, Tablet Header is no longer sticky on tablet I found your css has a max-width of 767px, please try changing this to 988px.

media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {
    position: fixed !important;
}
}

For #2 & #3, please try adding this css:

@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a {
    height: 80px !important;
    line-height: 80px !important;
    top: -10px;
}
}

For #4, please try adding this css:

@media only screen and (max-width: 768px) {
#top.home #footer > div {
	padding: 0 !important;
}
}

For #5 your mobile menu social icons have the class only-mobile and this css only allows it to show on tablets and above:

@media only screen and (min-width: 768px) {
.only-mobile {
    display: none;
}
}

Did you add this css? Please try removing it.

Best regards,
Mike

Hi,
Ok, if you include an admin login in the private content area, I could apply the above solutions for you to check.

Best regards,
Mike

Hi,
Thank you, I made these adjustments and re-checked that these seem to work correctly, please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, for the homepage socket please try this css in your quick css field:

@media only screen and (max-width: 767px) {
#top.home #socket > div {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
}

For your footer widgets, at 768px, please see the first screenshot below it highlights the margin-left of the columns to give a better view of the column widths. So this is using:

margin-left: 6%;
    width: 20.5%;

In the second screenshot, I tried to max the column width and reduced the margin to 1%, but it is not enough for your link “MANAGED VULNERABILITY” to form one line.

margin-left: 1%;
    width: 24%;

The widgets don’t have any inner padding or margin that can be removed, so for this screen width and the length of these links, they don’t fit.

Best regards,
Mike

Hi,

I fixed 1 error in Quick CSS field and 4 errors in Appearance > Customize > Additional CSS fields. CSS errors break CSS code and cause issues. As I mentioned before, please ask the person who is adjusting CSS to check their code on http://csslint.net/ for errors as most of the back and forth here is caused by those CSS errors :)

Fixing CSS helped with socket issue. For 3rd column of footer, I added following code to bottom of Quick CSS field

@media only screen and (max-width: 1014px) and (min-width: 769px) {
#footer div .av_one_fourth:not(.first) {
    margin-left: 4%;
}
#footer div .av_one_fourth:nth-child(3) {
    width: 26.5%;
}
}

Please review your website!

Best regards,
Yigit