Hi Kriesi-Team,

the described problem appears ONLY WITH SAFARI BROWSERS. I found now a not complete interim solution on one article in this forum
(https://kriesi.at/support/topic/toggle-menu-prolbems-within-safari-browser/#post-686014)

I added the following code to my css of the child theme:
@media only screen and (min-width: 1024px) {
ul#mobile-advanced {
width: 35%;
right: -40%;
}}

BUT WITH SAFARI THERE IS ONE ADDITIONAL PROBLEM I CAN’T SOLVE:
On big Apple tablets with wide screens safari hides elements, which I defined in my css only to hide on screen smaller than 1024px. You should know, that “.rob_menu” and “.rob_desktop” are classes from elements, I wanted to hide only on screens smaller than 1024px, BUT SAFARI HIDES IT ALWAYS:

@media screen and (max-width: 1024px){
.rob_menu, .rob_desktop {
display:none!important;
}

Do you have a solution? Please help.

Best regards!

Robby

I found the solution. It was due to having a static page set as the home page, and having uppercase letters in the URL, and appears to have happened to many people after WordPress updated to v 4.4.1. Here is the link to the solution: https://wordpress.org/support/topic/redirect-loop-after-update-wordpress-441/?replies=33

I removed the uppercase letters from the URL directly in the database, as well as updated it in the WordPress backend, and now I can use post name permalink without any problems.

Thanks a lot! Can you take a look at this thread – https://kriesi.at/support/topic/how-do-i-control-the-description-of-the-menu-links-on-the-creative-studio-demo/ – and see if you can help me out with that?

This is my custom css file

	/* Set charset */
	@charset 'UTF-8';
	
	html {
  		background: #d50080 !important;
	}
	
	#header {
    position: relative;
    z-index: 501; /*(issues/769)*/
    width: 100%;
    background: transparent;
	}
	
	#header_main {
		width: 100%;
		margin: 0px;
		border-bottom-style: solid;
    	border-bottom-width: 1px;
    	z-index: 1;
	}
	
	.main_menu ul:first-child > li > a{
		font-size: 16px;

	}
	
	.avia_desktop #advanced_menu_toggle:hover, .avia_desktop #advanced_menu_hide:hover {
    	background-color: #d50080;
		color: #ffffff;
    	border-color: #d50080;
    }
		
	.header_main_wrapper {
		max-width: 100%;
		margin: 0px auto;
		background: rgba(0,0,0,0.6);
	}

	
	/* **************************************** */

	#top .av_header_glassy.av_header_transparency #header_main {
    	background-color: rgba(0, 0, 0, 0.6) !important;
    }
    
    #advanced_menu_toggle, #advanced_menu_hide {
    	background-color: #000000;
    	color: #ffffff;
    	border-color: #000000;
	}
	
	/* **************************************** */
	
	
	div#header_main.container_wrap.container_wrap_logo {
		background: transparent !important;
	}
	
	
	.html_header_top #top .av_header_stretch .container {
    	width: 96%;
   	 	padding: 0;
   	 	max-width: 1400px !important;
	}
	
	.header_color .primary-background, .header_color .primary-background a,
	 div .header_color .button, .header_color #submit, .header_color input[type='submit'],
	.header_color .small-preview:hover, .header_color .avia-menu-fx,
	.header_color .avia-menu-fx .avia-arrow, .header_color.iconbox_top .iconbox_icon,
	.header_color .iconbox_top a.iconbox_icon:hover, .header_color .avia-data-table th.avia-highlight-col,
	.header_color .avia-color-theme-color, .header_color .avia-color-theme-color:hover,
	.header_color .image-overlay .image-overlay-inside:before, .header_color .comment-count,
	.header_color .av_dropcap2, #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text,
	.header_color .av-colored-style .av-countdown-cell-inner, .responsive #top .header_color .av-open-submenu.av-subnav-menu > li > a:hover,
	#top .header_color .av-open-submenu.av-subnav-menu li > ul a:hover {
    	background-color: #d50080;
    	color: #ffffff;
    	border-color: #b30060;
	}
	
	::selection {
    	background-color: #d50080; !important
    	color: #ffffff; !important
	}
	
	/* **************************************** */
	
	
	#menu-item-search {
		display: none;
	}
	
	#clients_slider {
    height: 120px;
    margin: 0px;
    padding: 0px
	
	#scroll-top-link{
    background-color: #d50080;
	}
	
	#scroll-top-link{
    color: #eeeeee;
    border: 1px solid #000000;
	}
	
	#socket .copyright {
    float: right; !important
	}
	
	
	#socket {
    font-size: 11px;
    margin-top: -1px;
    z-index: 1;
    background: #d50080 !important;
    color: #eeeeee;
	}

• This reply was modified 9 years, 6 months ago by insanityNL. Reason: missed a space in the code

That worked, thanks.

I changed where it says right to center thinking it would center the icons in the middle of the screen and it put the icons back off the screen like it was before.

How do I center the icons and also bring them to the top of the screen above the logo and hambuger menu?

Thank you.

Hi there yes details below :-)

Also is is possible to have the buttons with the outline – eg the dark transparent and light transparent but change the border colour?

And can there be a hoover effect over the images? I have them as background images so that I can have text and buttons over top of them but the text can be hard to read so a colour transparency that is enabled on hoover or a image blur effect or something – can that be done in the grid?

Hi Yigit

I am confused. The original CSS you gave me wasn’t in the styling sheet – I took it out when I couldn’t get it to work. So I am not sure what the mistake was in the styling that you fixed?
This is what you gave me-
@media only screen and (max-width: 480px) {
.flex_cell.custom-cell {
padding-left: 0!important;
padding-right: 0!important;
}} – this isn’t there anywhere? There is no change – the padding is still there on the mobile.

So I started trying the other option you sent through with the aim of hiding the image on the mobile but the having a colour section with the full width image which only shows on mobile. This is not the preferred option as it means I have to put every image in twice.

But I have started with that option to hide the image on the mobile version. I have added CSS
@media only screen and (max-width: 500px) {
#only-desktop { display: none !important; }
}

I have added the custom class ‘only-desktop’ to the section that holds the pear image on the front page. I have cleared the cache and minified CSS . Image still there. I tried .only-desktop instead of #only-desktop. no change.

I cannot get the custom class option on the sections to work at all.

I would prefer to go back to the first option of removing the padding. Can you look at that for me please?
Appreciate your help.
Karen