Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • April 21, 2015 at 5:33 pm #432179
    DaveL77

    1. My mobile menu, when you scroll over the selections, the background colour becomes white. We want it to be #212223.
    I cant find anywhere / any code to change this.

    2. Our search bar that is appended to the menu disappears on the mobile menu, not too sure why or how, but we;d like to get it back, even if its just a search button on the full mobile menu.

    I’ve added the site info to the private section

    April 22, 2015 at 7:06 am #432585
    Rikard

    Hi DaveL77!

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

    Menu colour:

    #mobile-advanced li > a:hover{
background-color:#212223 !important;
}

    Search button:

    @media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate {
  display: block !important;
}
.av-main-nav > li { display: none; }
li#menu-item-search {
  display: block!important;
  margin-top: -90px;
  right: 70px;
}
.responsive .main_menu {
  float: right;
}}

    Cheers!
    Rikard

    • This reply was modified 9 years, 8 months ago by Rikard.
    April 23, 2015 at 5:45 pm #433646
    DaveL77

    The mobile menu worked great, but I cant get the search button to work properly. It doesn’t show up at all at lower resolutions / mobile size.

    ALSO I found a new issue, when you bring the page to mobile size, the cart icon that is displayed is blocked by the mobile menu button. Not sure if it’s because of this code or not.

    April 24, 2015 at 6:17 pm #434313
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive #top .cart_dropdown {
  right: 10.5%;
}}
@media only screen and (max-width: 480px) {
.responsive #top .cart_dropdown {
  right: 12.5%;
}}

    and please change Rikard’s second code to following one

    @media only screen and (max-width: 990px) {
.main_menu .avia-menu, #header_main_alternate {
  display: block !important;
}
.av-main-nav > li { display: none; }
li#menu-item-search {
  display: block!important;
  margin-top: -40px;
  right: 70px;
}
.responsive .main_menu {
  float: right;
}}

    Regards,
    Yigit

    April 27, 2015 at 5:08 pm #435429
    DaveL77

    Hi,

    The above code made the search button show up, however it severely overlaps the logo when on mobile navigation.
    The cart is still being covered by the mobile menu as well.

    Is it not possible to have the LOGO – Search – Cart – Mobile Menu all lined up appropriately when on the mobile menu for any smartphone size?
    I’ve tried the look using google chrome with a base view of Iphone 5. The other views show the search button properly, but the cart is overlapped by the mobile menu.

    Examples:
    http://gyazo.com/aaa3cdbad5cc2f2bb613352845c2e758
    http://gyazo.com/14900762c78f2fe9f29056a4003789fd

    We’re definitely getting close to where we want to be with this, but it’s just not there yet.

    April 28, 2015 at 8:11 pm #436340
    DaveL77

    UPDATE

    Please ignore the issue about the cart icon overlapping with the mobile menu, we have removed the icon using code from another support topic:
    #top .cart_dropdown { display: none; }

    The main issue is the search icon overlapping with the logo during mobile widths.

    ALSO

    Would it be possible to have that cart icon / a cart dropdown in the secondary nav (the one above the main navigation)? Having the cart dropdown was pretty cool (when it was the icon) however it doesnt fit well with our layout. If possible we’d like to have the same / similar dropdown effect in the secondary nav.

    Thanks again for all of your help!

    April 29, 2015 at 9:53 pm #437086
    DaveL77

    Also, just to note.
    When you click the search icon via mobile (even though its overlapping the logo) the search box drop down is significantly cut off by the screen dimensions.

    Any fix there?

    May 4, 2015 at 11:50 am #438835
    Andy

    Hi!

    your search icon looks good to me. Please always provide us screenshots of what you see. You can use imgur.com or public dropbox to host your screenshots.
    Do you want to move the search bar more to the left? if yes use this code:

    @media only screen and (max-device-width: 736px) {
.avia-search-tooltip.avia-tt {
left: -131px !important;
}}

    and adjust as needed.

    If you need something else please send us a mockup showing what you want to achieve.

    Best regards,
    Andy

    May 4, 2015 at 4:06 pm #439003
    DaveL77

    http://gyazo.com/a4170f4623867822b99e14e9c41d1041

    When you click the search icon, the drop down is significantly cut off on the left.

    This is what the bar looks like: http://gyazo.com/906cabb0840372c2fadbcf82c44dd72f

    It’s cut off a pretty good portion when using mobile.
    I’ve tested this with iphone 5 and an ipod with the same results.

    The location of the search icon on the nav is okay.

    May 5, 2015 at 7:45 am #439545
    Rikard

    Hey!

    Please try this instead:

    @media only screen and (max-device-width: 736px) {
.avia-search-tooltip.avia-tt {
right:-100% !important;
}}

    Best regards,
    Rikard

    May 11, 2015 at 4:05 pm #442522
    DaveL77

    This piece of code didn’t seem to do anything.
    Is it interfering with other code maybe?

    May 12, 2015 at 11:16 am #442926
    Rikard

    Hey!

    It looks great on my end, could you try to empty your browser cache and reload a few times?

    Best regards,
    Rikard

    May 12, 2015 at 5:04 pm #443162
    DaveL77

    Hi Rikard,

    This is the view I get:
    http://gyazo.com/4b69918a7d0db07e010a18ad3e9360c8

    I’m not too sure what you’re seeing, but the search bar, when you click on the search icon is being cut off significantly. Thats the only issue here, everything else is perfect.

    May 14, 2015 at 5:47 am #444090
    Rikard

    Hi!

    I added a few arguments to the CSS in your backend but it seems to not be taking effect, do you know if there is any caching going on? I couldn’t see anything in your plugin folder though?

    Cheers!
    Rikard

    May 15, 2015 at 12:38 am #444688
    DaveL77

    There is no cache

    Only CSS changes are in the style.css and the enfold quick CSS section.

    Not too sure what you changed, but it moved the search icon back into overlapping the logo.

    May 15, 2015 at 9:52 am #444847
    Rikard

    Hi!

    Ok seems like it’s working better now, I set the search bar to 100px less width on small screens. Please review the page now and don’t forget to clear your browser cache and reload a few times to see the changes.

    Best regards,
    Rikard

    May 19, 2015 at 3:46 pm #446485
    DaveL77

    Works perfect. Thank you!

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘A few styling questions’ is closed to new replies.