Tagged: , , ,

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • August 17, 2020 at 9:17 pm #1238620
    RMConnection

    Hi Team,

    Right now my site is looking pretty odd on Mobile.

    1) The Secondary Menu in Mobile on the home page appears white on a white background. It is technically operating as it should, as on my desktop site there is a picture in the background that the white text appears on. However, there is no picture in the background on my mobile site so the text just appears on a white background. Ideally, I’d like the Secondary menu to show up as it does on every other page on mobile yellow text with a brown background. How would I accomplish this?

    2) The hamburger icon that you click to see the main menu in mobile is really wonky. Right now it appears cut off, has a different background than the page background, and currently overlaps the top part of my content. Ideally, (2A)I’d like it to have the same background as my page (#ffffff), (2B) have it not be cut off, (2C) and be in line with my logo in the header. (2D) Or even more ideally able to float with the customer as they scroll. I tried looking around for settings on this but couldn’t find any so hoping you guys can help me with this.

    Please let me know if there is anything I can provide you to help with this.

    Best,
    Jeff

    August 19, 2020 at 7:47 am #1239034
    Rikard

    Hey Jeff,

    Please try the following in Quick CSS under Enfold->General Styling:

    1.

    li.av-burger-menu-main {
  background:transparent;
}

    2.

    .av-burger-overlay-scroll {
  background: #fff;
}

#av-burger-menu-ul .avia-menu-text {
  color: #000;
}

    Best regards,
    Rikard

    August 19, 2020 at 6:36 pm #1239247
    RMConnection

    Hi @rikard,

    Unfortunately, neither of these code pieces solved anything for me.

    Best,
    Jeff

    August 20, 2020 at 5:28 am #1239407
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a fe times over.

    Best regards,
    Jordan Shannon

    August 24, 2020 at 9:15 pm #1240522
    RMConnection

    Hi @rikard and @Jordan Shannon,

    I have tried that and it has not changed anything. It is only the mobile appearance and function I’m trying to change so I imagine it might be pretty tough.

    Best,
    Jeff

    August 26, 2020 at 5:11 am #1240825
    Rikard

    Hi Jeff,

    The code for the overlay is applying on my end, the background for the burger is not though. Please try this instead:

    li.av-burger-menu-main {
  background:transparent !important;
}

    Best regards,
    Rikard

    August 26, 2020 at 6:34 pm #1240990
    RMConnection

    Hi @rikard,

    1) This has fixed my Hamburger menu so it doesn’t look broken which is great! I appreciate your help so far. Now I am wondering if we can move the hamburger menu up and to the left so it is in line with the rest of the header pieces? Right now it sits really low and too close to the shopping cart so it looks really funky. It functions perfectly just need a slight location change.

    2) The secondary menu above the header pieces is still appearing white on white on the homepage in Mobile. (outside of our phone number which is yellow and odd) Is there any way to fix this?

    Thank you for your help so far!

    Best,
    Jeff

    August 29, 2020 at 4:38 am #1241739
    Rikard

    Hi Jeff,

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

    1.

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

    2.

    @media only screen and (max-width: 767px) {
.home #header_meta {
  background: #5b2803 !important;
}

.home #header_meta .sub_menu li a {
  color: #f6ad04 !important;
}
}

    Best regards,
    Rikard

    August 31, 2020 at 8:14 pm #1242280
    RMConnection

    Hi @rikard,

    Thank you for your continued help!

    1) This has solved the position problem. However, now that I am looking at it I am wondering if we can make both the Hamburger menu and the Shopping cart bigger? Preferably the same size (Height) as the logo on the left. Only on mobile again as I quite like all of the sizes on desktop.

    2) This has solved this problem Thank you!!

    3) As I am looking at this header it is starting to bother me that the hamburger menu is on the left of the shopping cart. Would there be any way to switch their locations? Ideally, the hamburger menu would be on the right with the shopping cart right next to it in between the logo and hamburger menu. I know this is an add on to the project so thank you in advance!

    Best,
    Jeff

    September 2, 2020 at 8:46 am #1242716
    Rikard

    Hi Jeff,

    Please try this CSS as well:

    1.

    #top .av-small-burger-icon {
    transform: none;
}

.cart_dropdown_link span:before {
    font-size: 30px;
}

    3.

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    left: auto;
    right: 0; 
}
.responsive.html_bottom_nav_header #top #menu-item-shop.cart_dropdown {
    right: 50px;
}
}

    Best regards,
    Rikard

    September 2, 2020 at 6:34 pm #1242888
    RMConnection

    Hi @rikard,

    This is great! We are 90% there!

    1) The menu is looking good on almost all fronts. I am wondering if we can somehow edit the size of the cart and the hamburger menu independently/separately. Right now the shopping cart is slightly bigger than the hamburger menu visually.

    2) Also, I am wondering in my secondary menu I have a Gtranslate box allowing our site to be translated to other languages. Right now on both mobile and desktop (more importantly Mobile), The box is too long. Is there any way you know of to shrink the size/length of the box?

    Thank you for all of your help!

    Best,
    Jeff

    September 3, 2020 at 12:31 pm #1243072
    Rikard

    Hi Jeff,

    Please try this CSS as well:

    1.

    .av-hamburger-inner::after {
    bottom: -15px;
}

.av-hamburger-inner::before {
    top: -15px;
}

    2. I tried some CSS but it doesn’t seem to have any effect on the box in question. Please try reaching out to the providers of the code to see if they can help you out with styling it.

    Best regards,
    Rikard

    September 8, 2020 at 7:27 pm #1244410
    RMConnection

    Hi @rikard,

    Beautiful! And will do!

    I appreciate your help so far you have been an amazing help to my website’s overall design.

    1) I am now wondering if there is any way to center the search bar on the menu on mobile? Or just extend its length so that it stretches across the whole menu in mobile?

    2) Is there any way to have the menu (excluding the secondary menu) follow the customer as they scroll only in mobile?

    Thank you again for your help!

    Best,
    Jeff

    September 10, 2020 at 5:19 am #1244733
    Rikard

    Hi Jeff,

    Thanks for the update.

    1. Do you mean the search bar above the logo? If so then it looks to be full width/centered already on my end. I noticed that your burger menu is not showing though, is that intentional?

    2. Do you mean that you want the header/menu area to be sticky on mobile? If so then please try following this: https://kriesi.at/documentation/enfold/header/#sticky-header-on-mobile

    Best regards,
    Rikard

    September 10, 2020 at 7:31 pm #1244984
    RMConnection

    Hi @rikard,

    1) Yes. What mobile browser are you using? Right now I use both safari and chrome on my phone and this is how it displays across both. Mobile View of Website So I’m not 100% sure what you mean when you say the hamburger menu isn’t showing.

    2) This is a great step in the right direction! I’m wondering if there is any way to have the brown part of the header (The secondary menu) not be sticky though. So just the logo, search bar, shopping cart, hamburger menu, and white space around it would be sticky. As it is now a third of the customer’s screen is taken up by the sticky header.

    Thank you for all of your help with this!

    Best,
    Jeff

    September 12, 2020 at 5:58 am #1245264
    Rikard

    Hi Jeff,

    1. The mobile menu is visible again on my end.

    2. I think that would be very difficult unfortunately. Maybe it would be better if you hide the elements you don’t want in the header and place them in the content for mobile instead?

    Best regards,
    Rikard

    September 14, 2020 at 7:27 pm #1245814
    RMConnection

    Hi @rikard,

    These are good things to know.

    1) Glad it’s showing up. Is there any way to center the search bar above the logo and such?

    2) Unfortunate to hear but understandable. Would it be possible instead then to have just the hamburger menu scroll with the customer?

    Best,
    Jeff

    September 16, 2020 at 4:44 am #1246145
    Rikard

    Hi,

    1. Please try this CSS as well:

    @media screen and (max-width: 990px) {
#header form#searchform {
    left: 10%;
}
}

    2. I’m not sure if that is possible, could you turn off the sticky header so that we can check what CSS will work or not? I think it would be a better option to add the links you have in the brown header to the mobile menu, or to the actual content instead. Then hide that section for mobile.

    Best regards,
    Rikard

    September 16, 2020 at 6:48 pm #1246391
    RMConnection

    Hi @rikard,

    1) Perfect! Thank you!

    2) I have turned the sticky header on mobile off by making the CSS a comment. Let me know if you are able to come up with a solution but if not I will probably do exactly that and add the menu items to the hamburger menu.

    Thank you again for all of your help!

    Best,
    Jeff

    September 18, 2020 at 5:12 am #1246638
    Rikard

    Hi,

    Thanks for the update. You can put the burger menu in a fixed position by add this CSS:

    @media only screen and (max-width: 767px) {
.main_menu ul {
    position: fixed;
}
}

    I’m not sure if it’s what you are looking to achieve though.

    Best regards,
    Rikard

    September 21, 2020 at 8:05 pm #1247450
    RMConnection

    Hi @rikard,

    This is pretty good! Would there be a way to have the hamburger menu do what it is doing but shift up slightly once the user starts scrolling? (into the top right corner) It’s just a little too center screen once the user is scrolling. It’s fine in the header when at the top though.

    Best,
    Jeff

    September 22, 2020 at 9:37 am #1247551
    Rikard

    Hi Jeff,

    I tried to find a solution for that, but I couldn’t find one. If you want only the burger menu to be fixed then the previous CSS solution is the best I can give you unfortunately.

    Best regards,
    Rikard

    September 22, 2020 at 6:29 pm #1247683
    RMConnection

    Hi @rikard,

    No worries! Thank you for all of your help with this! I will try around and see what I like the best. This thread can finally be closed! I appreciate your help.

    Best,
    Jeff

    September 23, 2020 at 6:04 am #1247735
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘CSS Styling for Mobile Secondary menu and Hamburger’ is closed to new replies.