Viewing 30 posts - 1 through 30 (of 34 total)
  • Author
    Posts
  • #903061

    Hello,
    1. I have integrated a secondary menu (avia2-menu) in the header “top bar at the right”. This aligns to the right on desktop and on mobile it centers. How can I achieve that it centers on (i)Pads too?

    I have tried several css, at least

    
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul {
        position: static;
        float:left; 
        text-align: center; 
        margin-top:0; 
    

    but this does not work.

    2. How do I control the logo size on different devices like pads and smartphoes? My Logo is very wide.

    Thanks!

    Best Regards

    #903241

    Hey Sigmund,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .responsive #header_meta .sub_menu > ul {
        width: 30%;
      }
      .responsive .logo img {
        width: 75%;
      }
      .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
          right: -30px;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #903692

    Hello Victoria,
    thanks, but the only thing that happens is that the search magnifier has gone in the next line on (i)Pads. No centering.

    Can you help?

    Best Regards

    #904174

    Hello,
    I have tried to get on with question 2. (logo size) of my first post, but no results. Perhaps you can help here to.

    Best Regards

    #904640

    Hi,

    1.) Please use the following css code to center align the items.

    @media only screen and (max-width: 1024px)
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul {
        position: static;
        float: none;
        text-align: center;
        margin: 0 auto;
    }
    }

    2.) Insert additional css media queries to control the size of the logo on different screen sizes.

    @media only screen and (max-width: 767px) {
        .responsive #top .logo {
            height: 60px !important;
            width: 70%;
        }
    }

    Default height value is 80px and the default width value is 80%.

    Best regards,
    Ismael

    #906906

    Hi,
    the centering of the items still does not work. Can you take a look?

    Best Regards

    #907403

    Hi Sigmund,

    Credentials did not work for me. Could you please update the credentials?

    Best regards,
    Victoria

    #907943

    Hello,
    yes. On firefox responsive it looks good, but on concrete ipad device not.

    Best Regards

    #908037

    Hi Sigmund,

    Can you give me the password, please?

    Best regards,
    Victoria

    #908043
    This reply has been marked as private.
    #908063

    Hi,

    Best regards,
    Victoria

    #908086
    This reply has been marked as private.
    #908352

    Hi,

    Please try this CSS as well:

    @media only screen and (max-width: 1024px) {
    #header_meta .sub_menu {
      display:table !important;
    }
    }

    Best regards,
    Rikard

    #909669

    Hi Rikard,
    still no change, sorry.

    Best
    Sigmund

    #909690

    is there a link to that site?
    maybe an old html / css handmade webdesigner can help. :lol

    #909710

    Hi,
    thanks for coming in. I can send you a link if you give me your email adresse or other contact.
    Best
    Sigmund

    #909760

    my contact you can see on my Avatar – leads to my homepage

    #910160

    well – i can not simulate it on ipad and i don’t know where your break-point to mobile view is
    but i would get rid of that align center method and try to position it in this way:

    .av_secondary_right .sub_menu {
        padding-left: 0;
    }
    
    #avia2-menu {
        width: auto !important;
        position: relative !important;
        float: left !important;
        left: 50% !important;
        transform: translateX(-50%);
    }

    can you try this and have a look to your ipad if it works the way you want

    #910173

    and on your logo – i would do it in the way to have two logos on top

    you know how you did place the search in secondary logo – and your nav seems to be a different nav than the enfold one.
    but here you can see how it works with two logos on top and a little shift of nav.

    i will send you the link

    #910177

    Hi,
    thanks for your code. I have tried it, it did not work.
    I am trying other things now. To be honest I dont know why this is looking good on ipad, but it does:

    
    .responsive #header .sub_menu, .responsive #header_meta .sub_menu > ul {
    position: static;
    float: left;
    text-align: center;
    margin-top: 0;
    width: 100%;
    margin-left: 20%;
    }
    

    Best

    • This reply was modified 6 years, 10 months ago by Sigmund.
    #910178

    Hi,
    yes, I was thinking about the 2 Logo method too. At the moment it is one very big image file with to logos in it. Thats not good. So I would appreciate your link.

    Best

    #910186

    Hi,

    I’m sure @Guenni007 will check this thread again. Please wait for his response. :)

    Best regards,
    Ismael

    #939065

    Sorry Sigmund – long time ago – did you try that ?

    here is a new example with two logos – i think you like to have those logos both to the left
    https://webers-testseite.de/two-logo-header/

    both do shrink and on responsive case they go under each other.

    #939076

    Hi and thanks for coming back. You can see the result on https://blog.hamburger-software.de. As mentioned the logo is very width.
    Best Regards

    #939104

    yes but these are one logo
    first you have to split it into two separate logos –
    try to get same outer dimensions – best will be if the height is the same

    see link above with your logos-
    now i have placed the update logo in the center – on scrolling it goes to the left
    but i will see if it is possible to take the shrink calculation to have that the shrinking way not on reaching the header-scrolled

    #939115

    ich schreib jetzt mal deutsch – geht mir besser damit.
    Momentan teste ich das mit dem shrink event zu verknüpfen.
    Also beide logos sind momentan links – soll sich aber ändern.

    #939169

    so now have a look at: https://webers-testseite.de/two-logo-header/

    If this meets your needs, I’ll be happy to describe how it works

    #939220

    Yes, that look good! I would be happy about a description.

    • This reply was modified 6 years, 8 months ago by Sigmund.
    #939249

    kann ich hier deutsch schreiben ?

    1. download von pastebin : https://pastebin.com/dl/CHZuH4hA
    2. umbenennen nach shrink_fix.js
    3. in deinem child-theme einen ordner erstellen js ,
    4. das file shrink_fix.js in diesen ordner hochladen.
    5. das folgende in die functions.php des child-themes:
    a) Laden der neuen Header-Height funktion:

    function include_shrink_fix() {
       wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/shrink_fix.js', array('jquery', 'avia-default'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'include_shrink_fix', 100 );

    b) zwei neue Logos setzen, und später wird das in Enfold gesetzte Logo ausgeblendet
    Pfade, Namen und ggf Link des zweiten logos anpassen !

    function add_logos($logo) {
    	$logo .= '<span class="logo first-logo"><a href="/">' ;
    	$logo .= '<img src="/wp-content/uploads/hs-logo.jpg"/>';
    	$logo .= '</a></span>';
    	$logo .= '<span class="logo second-logo"><a href="https://url-nach-draussen" target="_blank">' ;
    	$logo .= '<img src="/wp-content/uploads/update-logo.jpg"/>';
    	$logo .= '</a></span>';
    	}
    	return $logo;
    add_filter('avf_logo_final_output', 'add_logos');	

    das ins quick css:

    .logo:first-child, .responsive .logo:first-child img{ display: none }
    
    .responsive #top .logo { height: inherit !important; position: relative}
    .logo.first-logo { z-index: 3}
    .logo.second-logo { z-index: 3}
    .logo.second-logo {37%}
    .logo.second-logo a {float: left}
    .logo.first-logo img, .logo.second-logo img {display: block}
    
    @media only screen and (max-width: 990px) { 
    div .logo {position: relative !important;}
    .responsive .logo.second-logo a {float: left; margin-left: 0px !important }   
    .logo.first-logo img, .logo.second-logo img{ max-width: 250px}
    }
    
    @media only screen and (max-width: 768px) { 
    .logo.second-logo { left: 3% !important }
    }
    
    @media only screen and (max-width: 468px) {  
    .logo.first-logo img, .logo.second-logo img{ max-width: 200px} 
    .logo.second-logo { left: 0 !important }
    }

    die Anweisung mit dem Z-index ist hier nicht nötig. War bei drei Logos mit einem in der mitte nützlich. – kann also weg

    Es werden sicherlich noch Anpassungen dann nötig sein; zB weil ich in der Testseite eine ander Header Höhe hatte.
    Eventuell downloadest du die Logos von meiner Seite :
    logo first-logo
    logo second-logo

    #939353

    Very cool, thank you!

Viewing 30 posts - 1 through 30 (of 34 total)
  • The topic ‘secondary menu and Logo on iPad’ is closed to new replies.