Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1292953

    Hi, I have a website where my client wants the hamburger menu on the right, just where it is now: http://integris-intl.com/

    And Wants the logo in the middle with a Contact Buton on the Left, just like this site here: https://www.henrybonas.com/

    I’m not sure quite how to accomplish this, if I need two Header Widgets or not. I tried placing logo in the center, but hamburger icon goes above or below instead of staying where it is.

    Is this possible?

    #1293084

    I am pretty much trying to do the same thing but with the Enfold social icons and not a separate link. I want the social icons to appear left of the logo at all times since they push my burger menu over my logo on mobile. I have a fixed dimension header and have added some padding to the logo display on the left so it appears centered on mobile.

    • This reply was modified 3 years, 6 months ago by crtdude.
    #1293823

    Hi,

    Thank you for the inquiry.

    Set the default logo to the default option, that is logo to the left and menu to the right, then use this css code in the Quick CSS field to move the logo in the center of the header container.

    .av-logo-container .logo {
        left: 50%;
        transform: translateX(-50%);
    }
    

    Best regards,
    Ismael

    #1294004

    Hi,

    1. Okay your code works to center the logo on a desktop, with the hamburger icon on the right. However, the header area is not then responsive and the logo gets cut off on a mobile phone. I have temporarily placed my left button widget in a Widget Area called “Header Widget Holding Area”, until I can make the header responsive.

    2. I have a transparent header, is there a way to make the background of the menu area black upon scroll instead of remaining transparent? It’s set to black in General Styling and typically I believe Enfold does that, not sure why it isn’t working on this site.

    3. The Menu overlay slide-out is not taking on the styling that I’ve given it in Enfold Child > Advanced Styling . I’ve added a red background to the menu itmes upon hover, but it doesn’t appear, which brings me to #5, the theme is outdated, could that be why?

    4. This is an older Enfold site that someone gave me, I didn’t build it, but I told them to buy Enfold and update the theme, which I’ve tried to do for them, manually (renamed named original version _old and kept it, and the new _new) but it breaks the site every time. I now have “Enfold_new” and I reverted back to their older version because I can’t make it work. Might you have any thoughts on this. The old version that works is 4.6.2 and that’s what they are running now.

    I am so sorry for so much

    • This reply was modified 3 years, 5 months ago by Eleina_Shinn.
    #1294263

    Hi,

    Thank you for the update.

    1.) You have to create more css media queries to adjust the style of the logo on mobile view, or to apply the previous css code on larger screens only. Example.

    @media only screen and (min-width: 989px) {
       .av-logo-container .logo {
          left: 50%;
          transform: translateX(-50%);
       }
    }

    This should apply the changes only on screens wider than 989px.

    2.) For the header effect, try to use this script in the functions.php file to toggle the header class attribute on scroll.

    function ava_header_on_scroll(){
    	?>
    	<script>
     (function($) {
        $(window).on("scroll", function() {
            if($(window).scrollTop() < 50) { 
              $("#header").removeClass("with-background");
            } else {
              $("#header").addClass("with-background");
            }
        });
    })(jQuery);
    	</script>
    	<?php
    }
    add_action('wp_footer', 'ava_header_on_scroll');
    

    Then use this css code to apply the black background.

    #header.with-background {
        background-color: #000000 !important;
    }
    

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.