Translations and responsive menu's

15 posts from 6 voices

• Started 4 months ago by MagentaManiacs
• Latest reply from Nick
• This topic is not a support question

Tags:

No tags yet.

1. 

   MagentaManiacs
   Member

   Hi,

   I'm having two little problems:

   1) Everything in the Replete theme is translated quite nicely to Dutch. I just can't seem to find out how to translate the word 'Cart' that's automatically inserted in the menu.

   2) Is there a way to keep the top menu visible in 'responsive mode'? Now I can only see the main menu.

   Thanks in advance!

   Posted 4 months ago #
2. 

   Ismael
   Moderator

   Hi,

   1.) Open woocommerce-config > config.php then find this code

   $output .= "<a class='cart_dropdown_link' href='".$link."'>".__('Cart', 'avia_framework')." - </a><span class='cart_subtotal'>".$cart_subtotal."

   Translate this line

   ('Cart', 'avia_framework')

   2.) To show the submenu, just add this.

   @media only screen and (max-width: 767px) {
   
   	 	/*footer and bellow*/
   	 	.responsive .sub_menu{display:block;}
   
   	 }

   You might need to reposition it.

   Regards,
   Ismael

   Posted 4 months ago #
3. 

   MagentaManiacs
   Member

   Hi, thanks for the fast reply!

   1) Correct me if I'm wrong, but I can't find a woocommerce config.php file?

   2) Addes this to the grid.css file without any results. Am I doing something wrong?

   Posted 4 months ago #
4. 

   Devin
   Moderator

   Hi MagentaManiacs,

   In your theme files open the config-woocommerce folder and inside it will be the config.php file. You will need to connect via ftp to view it.

   Add any new or custom css to either the Quick CSS file in your Styling sections or to the custom.css file in the css folder. Never add any css to the themes css grid,layout or main style.css files.

   Regards,

   Devin

   Posted 4 months ago #
5. 

   MagentaManiacs
   Member

   Ok, thanks, works perfect!

   The top-menu is now above the logo though and I can't seem to position it any lower. Any ideas on that one?

   Posted 4 months ago #
6. 

   Kriesi
   Key Master

   Hi!

   Mind sending us a link to your installation so we can check it ourself with the chrome web inspector?

   Regards,
   Kriesi

   Posted 4 months ago #
7. 

   MagentaManiacs
   Member

   Here it is: http://tire-bouchon.magentaplayground.be/
   Tnx!

   Posted 4 months ago #
8. 

   Dude
   Dude

   Hi!

   Please try to add following code to css/custom.css:

   @media only screen and (max-width: 767px) {
   	 responsive .sub_menu{margin-top: 45px;}
   	 .responsive h1.logo{margin-bottom: 45px;}
   }

   Best regards,
   Peter

   Posted 4 months ago #
9. 

   Ismael
   Moderator

   Hi,

   My bad. You should add this on your custom.css not on grid.css

   @media only screen and (max-width: 767px) {
   
   	 	/*footer and bellow*/
   	 	.responsive .sub_menu{display:block;}
   
   	 }

   Nice website. :)

   Regards,
   Ismael

   Posted 4 months ago #
10. 

    MagentaManiacs
    Member

    Ok, added to the custom css file, but the menu block is till layered above the logo. Any ideas on how to get it a bit lower?

    Posted 4 months ago #
11. 

    Nick
    Moderator

    Hi,

    This is what I see -> http://www.clipular.com/c?2063844=G8q3gsjPP_bYXbJ0zMvhOUJ3VHk

    There are 2 menus. One is on the same level to the right of the logo, and the second one is under the logo.

    What browser and OS are you seeing the menu (and which one) above the logo?

    Where do you want the menu, above the search box?

    Thanks,

    Nick

    Posted 4 months ago #
12. 

    MagentaManiacs
    Member

    Yes, this is looking good; but in responsive mode, the top menu is layered above the logo. Something I can't seem to fix.

    Posted 4 months ago #
13. 

    Nick
    Moderator

    Hi,

    The second menu became unattached since I believe you re-positioned it , and all it needs are media queries to control it for the various screen sizes you want to target. Here below are for 768 (ipad portrait) and another for 480 (iphone landscape). You also have little real estate left on the page at lower screen sizes for the second menu of that size, so i cut its width a bit and re-positioned it. For iPhone portrait, I am not really sure where to place the second menu (do you need it at that size?) That is a design question though, outside my area of expertise.

    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    #top .sub_menu{
    top: 10%;
    right: 0px;
    }}
    @media only screen
    and (max-device-width : 767px) {
    #top .sub_menu{
    top: 6px;
    left: 48%;
    width: 250px !important;
    }}

    You may need to add !important, to some of them, though at first glance doesn't seem so.

    Thanks,

    Nick

    Posted 4 months ago #
14. 

    MagentaManiacs
    Member

    Thanks, but I think I didn't express myself right. This is what I would like to do: http://grab.by/jSDi

    Posted 4 months ago #
15. 

    Nick
    Moderator

    Hi,

    Please try this code instead
    

    @media only screen
     and (max-device-width: 767px){
         #header .container_wrap_logo { height: 10em !important;}
         #top .responsive .sub_menu {
         left: 0.1em !important;
         top: 9em !important;
         }
    }

    Please add that to the end of Quick CSS or to the very end of /css/custom.css You will need to massage the left and top to create media queries for different screen sizes in this same format.

    Thanks,

    Nick

    Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.