Dropdown Customize, Search Results, and Static Google Map

- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  After sending out a user experience survey and receiving feedback for the new site, I have a few more questions I hope you can help with before my site goes live. Then, hopefully I won’t have to bother you anymore. You have been amazing, by the way. Here goes:
  
  1. How can I make edits to the look of the dropdown list? I would like to make the dropdown font more bold, and make the highlight background lighter. Basically, we need more contrast between resting and highlight in the dropdown, and to be able to more clearly see the text when it’s highlighted. I cannot find a place to customize this in the styling options.
  
  2. How can I change the hover color on search results?
  
  3. Is it possible to change my search results to show only products (not customer reviews or site pages)? I asked this question in the wordpress.org forum, but never received a response.
  
  4. I have a google map on my mobile home page (doesn’t show on the main site) that I would like to make static. It’s too difficult for people to scroll past it. I thought I remembered seeing something about how to do that elsewhere in the forum, but I can’t find it now.
  
  5. I know this is a long shot – but is there a way to alter the look of the shopping cart icon (that shows in the header, next to the search icon)? We’d like it to have a circle around it, or a lighter background, or something to make it stand out more. Is this possible?
  
  That’s it! Thanks again for all of your help and patience so far – I really couldn’t have done this without you, especially Mihaila. I feel like I need to take you all out for a drink.
- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  So sorry – I forgot one more thing on my list:
  
  6. I’ve got my responsive menu style (Tower>Header Options) set to the “side menu” style. However, the menu items showing on this menu (“Home”, “Template Default”, “Agency WordPress” and “Theme”) are not the menu items for my site. When I select the “standard” side menu style, the correct menu shows.
  
  I can’t figure out how to change this responsive menu. I’ve looked under Tower>Header Options> Menu Options) as well as Appearance>Menus, Appearance>Headers and Appearance>Widgets. Where do I set this?
- 8 years, 7 months ago Mirela
  Participant
  Hello,
  
  1-Are you referring to the mobile menu drop-down or the desktop? The mentioned changes can be done with some css.
  Add this code for the on hover background color of desktop menu:
  
  nav .menu li > ul.sub-menu li:hover { background: rgba(239, 239, 239, 0.75) !important; }
  
  Add this for the mobile:
  
  @media (max-width: 979px){ .snap-drawer #navigation nav .menu > li:hover { background: rgba(239, 239, 239, 0.75) !important; }}
  
  2-Do you mean the h1 titles color on hover? Add this code:
  
  .search-results h1 > a:hover { color: #9A2BE0 !important; }
  
  3-Sorry but this requires code modification that takes quite some time and it is not included in support. You could hire a developer to do it for you.
  A workaround is to remove the theme search at General Options > Header Options > and add woocommerce search widget. Add the widget in top header area.
  
  4-I added this code into your custom css box:
  .row-fluid.row-google-map { pointer-events: none;}
  Inside the @media (max-width: 480px) block.
  5-Add this code:
  
  .header_tools .cart { border: 2px solid #80296A; border-radius: 5px; width: 33px; height: 33px; } header#header .header_tools .cart .cart_icon { top: 9px; left: 2px; }
  
  To add a border to cart icon. Or you can add a background image too with css.
  
  6-This is strange. I checked it on our side and it does not happen. Please send us your ftp credentials in a private reply. We need to check the menu files.
  
  PS: I am happy to know you are satisfied with our support. Thank you for your appreciation!
  
  Best regards!
- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  Mihaila –
  
  1. Perfect – thank you! Is there any way to also bold the dropdown text?
  
  2. Sorry, I do not mean the text, I mean the image overlay. When you search for something and get to the list, there are large images. When you hover over them they currently turn a light purple color – I’d like them to be the same image overlay as the rest of my site: rgba(209, 193, 159, 0.61)
  
  3. Understood – thank you!
  
  4. Perfect – thank you! Can I include the next level up of media as well? Not sure what to call it – but when you turn a smartphone sideways – I’d like the map to stay static in that mode as well.
  
  5. Thank you! I’ll send that to my designer, see what she thinks. But at least I know it’s possible.
  
  6. Will do – thank you!
- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  This reply has been marked as private.
- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  This reply has been marked as private.
- 8 years, 7 months ago Mirela
  Participant
  Hello,
  
  Sorry for the late reply.
  
  1-To make text bold add this code:
  nav .menu li a:hover { font-weight: bold;}
  
  Add this for the mobile:
  
  @media (max-width: 979px){ .snap-drawer #navigation nav .menu > li a:hover { font-weight: bold;}}
  
  2-For the images, add this code instead:
  
  .search-results .blog-article .media .overlay { background: rgba(209, 193, 159, 0.61); }
  
  4-Add this code too:
  @media (max-width: 767px){.row-fluid.row-google-map { pointer-events: none;}}
  
  6-Please check the credentials as i can’t login.
  
  Best regards!
- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  Mihaila
  
  1. That is excellent! Is there any way to make it bold all the time (not just on hover)?
  
  2. Perfect!
  
  4. That did not seem to work.
  
  6. Since I didn’t set the first response with my credentials to private, I have since reset my password. Please see the private response I sent to you (on May 22) with the new credentials. Also, is there any way you can delete that public response I gave with my credentials, so my username is not broadcast?
  
  Thank you!
  
  Rebecca
- 8 years, 7 months ago Mirela
  Participant
  
  Hello,
  
  2- Yes, edit it to this: nav .menu li a { font-weight: bold;}
  
  4-You had pasted the code wrong. It was inside another @media block. Please try again now as i edited it.
  
  6-Please send us the topic you are mentioning so we can edit it.
  
  Best regards!
- 8 years, 7 months ago rebeccaolson
  Participant
  
  Expired
  
  Mihaila –
  
  2. Thank you!
  
  4. This still is not working on my phone (the google map is static when the phone is upright, but when I move it to horizontal the map goes back to being scrollable.) Is my smartphone perhaps outside the width you have set, so it is defaulting to the tablet settings?
  
  6. I’m not sure what you mean by “send us the topic you are mentioning so we can edit it”? My original issue is the same: I’ve got my responsive menu style (Tower>Header Options) set to the “side menu” style. However, the menu items showing on this menu (“Home”, “Template Default”, “Agency WordPress” and “Theme”) are not the menu items for my site. When I select the “standard” side menu style, the correct menu shows. In the screenshots I sent you privately, you can see what I mean. You said above that you need to check the menu files. Do you need anything other than my FTP credentials?
- 8 years, 6 months ago Mirela
  Participant
  
  Hello,
  
  Sorry for the late reply.
  4- I made the tests in iphone vertical and horizontal layout. It does work. What phone are you using?
  
  6-I think i misunderstood you. In your last reply i read this:
  “Please see the private response I sent to you (on May 22) with the new credentials. Also, is there any way you can delete that public response I gave with my credentials, so my username is not broadcast?”
  I did not find any May 22th reply, so i asked for some help so i could find it faster.
  
  We are currently checking the side menu issue and will get back to you asap.
  
  Best regards!
- 8 years, 6 months ago rebeccaolson
  Participant
  
  Expired
  
  Mihaila –
  
  4. I am using a Nexus 5x.
  
  6. I’m sorry to be unclear. So are you able to log in? Or do you need me to resend the credentials in another private reply?
- 8 years, 6 months ago Mirela
  Participant
  Hello,
  
  Sorry for the late reply.
  1-I made several tests of the page in different mobiles and in nexus 5x simulator but the map is static. Please clear your phone cache and refresh page.
  
  2-I fixed it. The “Right menu” is showing up in mobile now. Since the current menu is different from the normal menu (it is composed by two different menus), the side menu in mobile called the main menu, which was undefined.
  So i switched back to simple menu, assign the “Right menu” to it, then switched back to left-right menu style.
  Please check your site and let us know.
  
  Best regards!
  
  This reply was modified 8 years, 6 months ago by Mirela.
- 8 years, 6 months ago rebeccaolson
  Participant
  
  Expired
  
  Mihaila –
  
  Thank you so much for all of your help!
  
  1) For some reason, even after clearing my cache, the google map still isn’t static on the sideways view. It isn’t on my husband’s phone either (he also has a Nexus 5x.) I’m going to stop worrying about it, or remove the map, so don’t worry about spending any more time trying to resolve it. Thank you for trying.
  
  2) Thank you! I changed the menu items to be what I want, so it all works great now. The final thing is that the spacing at the top of the menu is off. The logo (which appears above the menu) is off center and cut off on the right, and the top menu item (Visit The Farm) is more left than the other menu items. Here is a screenshot of what I mean: https://drive.google.com/file/d/0B4h0j1zXr6_xWVpqYURZbFZoeGc/view?usp=sharing
  
  Rebecca
- 8 years, 6 months ago Mirela
  Participant
  Hello,
  
  Please add this code into your custom css box:
  
  @media (max-width: 767px){ .snap-drawer #logo img.dark {margin-left: -10px !important;} .navigation .menu li:first-child { margin-left: -10px !important;} }
  
  Edit the values to your wish.
  
  Best regards!
- 8 years, 6 months ago rebeccaolson
  Participant
  
  Expired
  
  Mihaila –
  
  That code didn’t work, but I played around and with the logo at -140px it finally looks centered above the menu. I am a little concerned that this will only look good on my phone (since a margin of -140px seems drastic). Shouldn’t the logo just be centered, like the rest of the menu items, relative to the other margins/size of phone? Or am I worried about nothing?
  
  Also, the first menu item is still too far to the left. I tried adding to the margin { margin-left: 30px !important;} but it didn’t affect it at all.
  
  Rebecca
- 8 years, 6 months ago Mirela
  Participant
  Hello,
  
  I edited the code for the first menu items alignement to this:
  
  .snap-drawer #navigation nav .menu > li:first-child { margin-left: 11px !important; }
  
  It’s ok now. Please check your site.
  
  Best regards!

Viewing 16 reply threads

You must be logged in to reply to this topic.

Community Forums

Dropdown Customize, Search Results, and Static Google Map

Site Links

Useful Articles

Login