Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 15, 2022 at 4:29 pm #1340743
    Veronika

    Hi dear Kriesi-Team,

    The icons of my menu and search are on the iPad and mobile version inverted. How can I change them, so they are displayed all the time alike on my web version?

    Web version: https://imgur.com/ayUOzd0
    Ipad version: https://imgur.com/SW3GxfI
    Mobile version: https://imgur.com/H7OdUtB

    Thank you very much,
    Best,
    Veronika

    February 15, 2022 at 7:11 pm #1340773
    Yigit

    Hi Veronika,

    That is related to your custom CSS.

    I commented out following codes:
    In Enfold theme options > General Styling > Quick CSS 

    .av-burger-menu-main.menu-item-avia-special .av-hamburger {
	padding: 25px;
	position: fixed;
	right: 10px;
	top:0;
}

.html_burger_menu_active #top #wrap_all #header #avia-menu .av-burger-menu-main.menu-item-avia-special > a{
	width: 58px;
	position: fixed;
	right: 20px;
	top:40px;
}

    In Design > Customize > Additional CSS 

    .av-hamburger {
margin-right : 20px !important ;
padding-top : 20px !important ;
padding-right : 3px !important ;
}

    Please review your website :)

    Regards,
    Yigit

    February 16, 2022 at 12:43 am #1340809
    Veronika

    Hi Yigit,

    now it is looking like this: https://imgur.com/Q2mDFwp

    What should I change in the code?

    Thank you

    all the best,

    Veronika

    February 17, 2022 at 12:55 pm #1341130
    Yigit

    Hi,

    That was also related to your custom CSS.

    I commented out following code in Appearance > Customize > Additional CSS

    @media all and (max-width: 989px){
	.av-burger-menu-main.menu-item-avia-special .av-hamburger{
		right: 50px;
	}
	.html_burger_menu_active #top #wrap_all #menu-item-search > a{
		height: 80px;
		top: 42px;
		right: 25px;
	}
	.html_burger_menu_active #top #wrap_all #header #avia-menu .av-burger-menu-main.menu-item-avia-special > a{
		right: 70px;
	}
}

    and changed following code in Quick CSS field from

    .av-hamburger span {
	top: 13px;
}

    to following

    @media only screen and (min-width: 990px) {
.av-hamburger span {
	top: 13px;
}
}

    Please review your website :)

    Best regards,
    Yigit

    February 17, 2022 at 1:29 pm #1341146
    Veronika

    Hi Yigit,

    it looks great but I’m trying to display them as they are displayed on my web version: https://imgur.com/ayUOzd0
    Among themselves

    Could you please help me to achieve that? Thank you very much :)

    Best,
    Veronika

    February 17, 2022 at 3:56 pm #1341183
    Yigit

    Hi Veronika,

    I thought you wanted to do the opposite :)

    I added following code to bottom of Quick CSS field

    #avia-menu {
  display: flex;
  flex-direction: column-reverse;
}
@media only screen and (max-width: 990px) { 
 #top #menu-item-search {
  margin-top: -30px;
}
}

    Please review your website :)

    Best regards,
    Yigit

    February 18, 2022 at 9:17 am #1341304
    Veronika

    Hi Yigit,

    it looks absolutely amazing, thank you so much for this and my apologies. My English is not so great, I probably wrote something wrong :)

    Have a great day,

    you can close this now

    Best,
    Veronika

    February 18, 2022 at 12:24 pm #1341318
    Yigit

    Hi Veronika,

    You are welcome!

    No, it was my bad :) Please feel free to remove commented out codes I mentioned above.

    Let us know if you have any other questions and enjoy your weekend!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘invert menu / search icon’ is closed to new replies.