1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Header logo and menu

Discussion in 'Free Divi Community Forum' started by sumaj, Sep 24, 2021.

  1. sumaj

    sumaj New Member

    Hi,

    I'm having an issue with screen size and my header.
    I want the bottom of my logo (image module) to be aligned with the bottom of the menu text on various desktop sizes. Does someone knows how to keep an absolute logo size ?

    I'm doing 3 headers for desktop, tablet and mobile. So this is the desktop one but I'd have to apply this on each one to be consistant with any screen size.

    When I shrink the window the menu stays the same but the logo gets smaller and no more in line.

    Here you can see : sumajmusic.com
     
    #1 sumaj, Sep 24, 2021
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to go to the Row Settings > First Column Settings > Advanced > Custom CSS > Main Element & add:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help, Sep 25, 2021
  3. sumaj

    sumaj New Member

    Thank you this worked ! Now the bottom of the logo is aligned with the bottom of the text but I still have a problem :
    the image of the logo resizes while the text keeps the same size.
    I'd like to have a fixed size for the logo as wellis this possible too ?
     
    #3 sumaj, Sep 27, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  4. sumaj

    sumaj New Member

    Also as it resizes, it changes its position. You can see it now my site is back up again.
     
    #4 sumaj, Sep 27, 2021
  5. Divi.Help

    Divi.Help Administrator
    Staff Member

    If you want to have fixed size for logo, then go to the logo image module settings & set a width. For example, 350px.
     
    #5 Divi.Help, Sep 29, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade floating button design for your Divi site without using any plugins:View Demo
  6. sumaj

    sumaj New Member

    Thank you ! Indeed my width was in percent so it moved.
    But it still moves when it's close to the tablet breakpoint and it also does it in tablet view.
     
    #6 sumaj, Sep 30, 2021
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    It will shrink if the container is smaller than your logo width.

    To make it a fixed width throughout the size, then you may try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    It's best for you to include a CSS class for the image module, so that it will only affect the targeted logo image module.

    For example:
    header .your_image_module_css_class .et_pb_image_wrap
     
    #7 Divi.Help, Oct 2, 2021
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  8. sumaj

    sumaj New Member

    Thank you this is it
     
    #8 sumaj, Oct 5, 2021
  9. sumaj

    sumaj New Member

    I continue on this thread for my mobile header :

    The hamburger icon doesn't want to align to the right and the logo image gets zoomed in and cropped after a certain screen size.
    This header is 1 line and 2 colomns.
    The code I added thanks to your answer is this for the logo :

    Code:
    Log In or Sign Up to view this code.
     
    #9 sumaj, Oct 5, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to go to your Row Settings > Advanced > CSS Class & remove three-columns
     
    #10 Divi.Help, Oct 11, 2021
  11. sumaj

    sumaj New Member

    Thank you that worked but now my tablet menu drops below the logo
     
    #11 sumaj, Oct 11, 2021
    1. PRO MEMBER PERKS Divi Block Pro - Premade before / after image slider for your Divi site without using any plugins:View Demo
  12. sumaj

    sumaj New Member

    Thank you that worked but now my tablet menu drops below the logo.
     
    #12 sumaj, Oct 11, 2021
  13. sumaj

    sumaj New Member

    Actually the logo is still big and cropped on the phone
     
    #13 sumaj, Oct 11, 2021
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
(You must log in or sign up to post here.)