Specific color for burger menu on specific pages - Support | Kriesi.at

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
September 8, 2022 at 12:04 pm #1364314
TakiwaSoulArt
Participant
Hi,

a news question for the mobile vies of the website in private content.

On three pages I have a different color for the navigation, because the background is white. For these three pages I need a code to change the color of the burger menu symbol in mobile view Tablet and Smartphone under 767px.

And I think in mobile view under 479px are the social bookmarks included (or not?) but the color is white and so they are also not visible. In this smaller mobile vies, I need the social bookmarks visible in the burger menu. Do you have any solution?

Thank you so much and best regards,
Sabine
- This topic was modified 2 years, 2 months ago by TakiwaSoulArt. Reason: Specific color for burger menu on specific pages
September 8, 2022 at 5:11 pm #1364359

Rikard
Keymaster

Hey Sabine,

I’m not sure which these pages are on your actual site, could you link to an example page please?

Best regards,
Rikard

September 8, 2022 at 5:34 pm #1364364

TakiwaSoulArt
Participant

Hi Rikard,

the links are in the private content.

Best regards, Sabine

September 8, 2022 at 8:05 pm #1364384
Rikard
Keymaster
Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
```
.page-id-339 .av-hamburger-inner, .page-id-339 .av-hamburger-inner::before, .page-id-339 .av-hamburger-inner::after, .page-id-1302 .av-hamburger-inner, .page-id-1302 .av-hamburger-inner::before, .page-id-1302 .av-hamburger-inner::after, .page-id-351 .av-hamburger-inner, .page-id-351 .av-hamburger-inner::before, .page-id-351 .av-hamburger-inner::after {
    background-color: #006699;
}
```
Best regards,
Rikard
September 9, 2022 at 10:25 am #1364408

TakiwaSoulArt
Participant

Hi Rikard,

thank you, but the code doesn’t work. And I need the color #006699 before hover and the color #f79007 after hover on these three pages. The symbol is still not visible and the social bookmarks aren’t visible under 479px screens.

An additional question: is it possible to change the position of social bookmarks and the burger menu symbol on screens under 767px? Now it is: Burger menu symbol at the left and social bookmarks on the right. It would be better to have the burger menu right and the social bookmarks on the left.

Thank you again

Best regards, Sabine

September 9, 2022 at 4:15 pm #1364432
Rikard
Keymaster
Hi,

Try this CSS instead:
```
.page-id-339 .av-hamburger-inner, .page-id-339 .av-hamburger-inner::before, .page-id-339 .av-hamburger-inner::after, .page-id-1302 .av-hamburger-inner, .page-id-1302 .av-hamburger-inner::before, .page-id-1302 .av-hamburger-inner::after, .page-id-351 .av-hamburger-inner, .page-id-351 .av-hamburger-inner::before, .page-id-351 .av-hamburger-inner::after {
    background-color: #006699 !important;
}
```
There’s no hover on mobile devices, so I’m not sure I understand what colour changes you are referring to?

If you have additional questions then please ask them after your initial request is solved, or create a new thread. One problem per thread is what we generally prefer, as threads are then easy to follow for both moderators and other forum users.

Best regards,
Rikard
September 12, 2022 at 11:38 am #1364713

TakiwaSoulArt
Participant

Hi Rikard,

this code works but what I miss is following: I can’t see the social bookmarks on the mobile version with screen under 479px on the same pages.

Thank you for the help and best regards,
Sabine

September 12, 2022 at 8:13 pm #1364815
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
@media only screen and (max-width: 479px) {
.page-id-339 #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks, .page-id-1302 #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks, .page-id-351 #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
}
}
```
Best regards,
Rikard
September 13, 2022 at 11:39 am #1364883

TakiwaSoulArt
Participant

Hi Rikard,

I am sorry, but the code does not work. The bookmarks are not yet visible. I have the impression that there is space above the menu for the social bookmarks – I don’t know that from other websites. But – as I said – they are not yet visible.

Best regards,
Sabine

September 13, 2022 at 4:57 pm #1364939
Rikard
Keymaster
Hi,

Please try this CSS instead:
```
@media only screen and (max-width: 479px) {
.page-id-339 #header .social_bookmarks, .page-id-1302 #header .social_bookmarks, .page-id-351 #header .social_bookmarks {
    display: block !important;
}
}
```
Best regards,
Rikard
September 14, 2022 at 12:02 pm #1364987

TakiwaSoulArt
Participant

Hi Rikard,

unfortunately the code still doesn’t work. It is not important to create the code only for these three pages, but it must work for all pages, because the background color of the burger menu is a transparent black and the social bookmarks should then appear white in the menu.

Thank you and best regards,
Sabine

September 14, 2022 at 4:45 pm #1365014
Rikard
Keymaster
Hi,

Please try this CSS instead then, which should apply for all pages:
```
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block !important;
}
}
```
Best regards,
Rikard
September 15, 2022 at 12:20 pm #1365110

TakiwaSoulArt
Participant

Hi Rikard,

thank you, the code works. I just thought the social bookmarks appear in the burger menu and not in the header area. Is it possible that they appear in the burger menu itself?

Thank you very much and best regards,
Sabine

September 15, 2022 at 4:40 pm #1365168

Rikard
Keymaster

Hi,

Please refer to this thread: https://kriesi.at/support/topic/adding-social-media-icons-to-mobile-menu-on-mobiles-only/

Best regards,
Rikard
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.