Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 15, 2017 at 10:58 am #877032
    Jasmer

    Hello,

    On a few of my sites, odd things are happening in the headers and other elements. I have changed no elects or colors on this site, but elements are changing without my making any edits. The site used to appear normally, then after an update or two things spontaneously changed.

    Desktop: I can barely see the menu items. The color is wrong. It is fine when I scroll, but before I scroll it is not fine. With your help on another thread here https://kriesi.at/support/topic/logo-area-background-color/ I changed these fonts and it worked properly until one day it didn’t.

    Mobile This is really odd.
    1. The header social links have changed from horizontal to suddenly vertical down the page!
    I believe this is the post where we changed it and it was perfect, but now it just changed somehow. https://kriesi.at/support/topic/mobile-menu-social-icons/

    2. The hamburger menu has completely disappeared!

    Are the social icons causing this problem? Is there a better way to have social icons in the header?

    It is important to note, I don’t want to add CSS on top of CSS, I’d like to find out what is wrong with the current CSS I added.

    Feel free to look around.. Thank you!

    November 18, 2017 at 10:26 am #878448
    Rikard

    Hey Jasmer,

    Sorry for the late reply. We reworked the whole menu a few versions back so it might be due to the update. Could you start off by removing the customisations to see if everything work as expected then? If it does then we can start rebuilding the look of your site.

    Best regards,
    Rikard

    November 19, 2017 at 6:19 am #878710
    Jasmer

    Hello Rikard,

    1. Regarding LM (see below). I deleted this CSS and the problem disappeared.

    .responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
	display: block !important;
	top: 43px !important;
} /*icons postion*/

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
    padding-top: 25px;
}

.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
    display: block !important;
    top: -5px!important;
    right: 40px;
}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 380px) {
#top #wrap_all .social_bookmarks, #top #wrap_all .social_bookmarks a, #top #wrap_all .social_bookmarks li {
    margin-left: -5px;
} /*icons closer*/
}

    2. However, I really would like social icons in the header of the mobile site. Do you have any suggestions as to the best way to do this? They seem to crowd the elements. Is it possible to put a row of icons in an element above the site logo and the hamburger menu going across the top so ti doesn’t crowd those?

    3. I have another problem, the menu items with in the hamburger menu need to be white AND the hamburger menu itself needs to be white. I thought I took care of that with this CSS. I’d prefer to do this within the theme settings if possible, but I can add CSS if you feel that is a better option.

    #advanced_menu_toggle, #advanced_menu_hide {
	color: #ffffff !important;
}

    Thank you,

    Jas

    November 19, 2017 at 8:07 am #878713
    Jasmer

    1. Regarding SHS (see below). I deleted this CSS and it caused odd problems. I’ll list them below.

    #advanced_menu_toggle, #advanced_menu_hide {
color: #666666!important;
}

@media only screen and (max-width: 767px) {
#photo-center .av-parallax.avia-full-stretch.active-parallax {
background-position: 35%!important;
}}

@media only screen and (max-width: 767px) {
.responsive .main_menu .avia-menu, .responsive #header_main .social_bookmarks, .responsive #header_main_alternate {
    display: block !important;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 380px) {
#top #wrap_all .social_bookmarks, #top #wrap_all .social_bookmarks a, #top #wrap_all .social_bookmarks li {
    margin-left: -7px;
} /*icons closer*/
}

@media only screen and (max-width: 768px) {
#top .av_header_transparency .phone-info, #top .av_header_transparency .phone-info span {
    color: #555555 !important;
}} /*for appointment call info*/

@media only screen and (max-width: 480px) {
.phone-info a {
    color: #555555 !important;
}} /*phone number info darken phone*/

    2. These are the odd problems

    a) The menu items on the desktop disappeared. Gone. Weird which seems to be tied to this specific CSS below. When I delete that the menu items on the desktop site disappear.

    @media only screen and (max-width: 767px) {
.responsive .main_menu .avia-menu, .responsive #header_main .social_bookmarks, .responsive #header_main_alternate {
    display: block !important;
}

    b) Additionally, the hamburger menu does not appear on the mobile site, whether the CSS above is in place or not.

    3. Also the desktop menu links are a strange color/layer effect and are difficult to see, they were not this color when you guys helped me with the original CSS. So whatever is happening is affecting both the desktop site and the mobile site.

    This is a confusing issue. Feel free to look around…

    Thank you,

    Jas

    November 22, 2017 at 6:18 pm #880393
    Yigit

    Hi,

    I removed following code from Quick CSS field

    #avia-menu { display: none; }

    and then change hamburger menu icon color to black in Enfold theme options > Main Menu > Burger/Mobile Menu Styling and then i went to Enfold theme options > Header > Transparency Options and set transparent menu item color to white.

    Please review your website

    Best regards,
    Yigit

    November 22, 2017 at 10:39 pm #880494
    Jasmer

    Hi Yigit!

    I can’t tell if the hamburger menu works or not because there is no way to click on the menu as the social icons are layered on top of it. (See screenshot below.)

    Also we are dealing wit two websites that have the same problem.

    These were elements you helped me with some time ago.

    I need to address the issue of repositioning the icons. What are my options? Will you please read my last 2 messages and respond? I’m very specific in my previous comment.

    Thank you so much,

    Jas

    November 25, 2017 at 4:55 am #881477
    Rikard

    Hi,

    Thanks for the feedback. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
.responsive #header_main .social_bookmarks {
    right: 100px;
    width: 150px;
}
}

    Best regards,
    Rikard

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.