#136988 CSS tricks for header

Landing Forums JupiterX WordPress Theme CSS tricks for header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • Hannes Fuchs

    hi, i’m trying to fix header-behavior for small screens with
    @media screen and (min-width: 1036px) and (max-width: 1330px) {

    smaller logo, smaller size of menu etc.

    i now use:
    .elementor-397 .elementor-element.elementor-element-68d772ca .raven-site-logo img, .elementor-397 .elementor-element.elementor-element-68d772ca .raven-site-logo svg {
    width: 95px;
    }

    its better to use ids and classes?

    Nodari Support Team

    Hi Hannes

    I see your code is working normally, what is the problem? 🙂

    “its better to use ids and classes?” – No difference, both can be used as a CSS selector, so, its up to you 🙂

    Regards

    Hannes Fuchs

    i see it is not working on sticky header .. therefore i’m asking

    Nodari Support Team

    Hi Hannes

    I see you have both codes for normal header:

    .elementor-397 .elementor-element.elementor-element-68d772ca .raven-site-logo img, .elementor-397 .elementor-element.elementor-element-68d772ca .raven-site-logo svg {
        width: 95px;
    }

    and for sticky header:

    .elementor-1625 .elementor-element.elementor-element-65e179ff .raven-site-logo img, .elementor-1625 .elementor-element.elementor-element-65e179ff .raven-site-logo svg {
        width: 85px;
    }

    They are both wrapped in media query:

    screen and (min-width: 1036px) and (max-width: 1330px) {
    }

    and they are both working as intended to work, could you please rephrase your question a little bit? I only need to know what is your goal? if necessary I will generate new CSS for you,

    If im not wrong this is your problem? https://prnt.sc/224jz32 when menu falls under the logo?

    Regards

    Hannes Fuchs

    hi nodari,

    i tried to resize menü, logo and the 2 buttons for (min-width: 1036px) and (max-width: 1330px)
    when you resize the screen at the end by 1.106 i have this problem https://prnt.sc/224jz32

    also on sticky header my code for resizing the buttons seems not to work

    regards

    Nodari Support Team

    Hannes, the way you are holding menus and logo in the header template is wrong, it will not work, https://prnt.sc/224s6sy instead, you need to split section by columns and add logo and menus in each column, you may also use inner section instead of columns, in this case, you will not have this problem

    The code works for sure, check this out: https://prnt.sc/224sh58 however you have the same mistake in the sticky header as well, I recommend fixing this layout problem

    Regards

    Hannes Fuchs

    ok, i’m trying this!
    but why i have no a gap on the right side: https://prnt.sc/2260yu6

    columns are correct with 14, 63 and 23%

    Nodari Support Team

    Hi Hannes

    Width of the last column is not 23% https://prnt.sc/22994yr make sure columns are distributed evenly 🙂

    Regards

    Hannes Fuchs

    i now, but this is the tipical jupiter/elementor bug. when i try to set 23% on third column the second column goes to 62,3% … even if i set structure to 1/3 1/3 1/3 gap is gone away.

    if i try to set first colum to 14% and second to 63% i have again the gap

    Nodari Support Team

    Ok, I used this CSS code in the Additional CSS, at the bottom, and looks like its fixed, please verify Hannes, and sorry for the long ticket 🙂

    @media (min-width: 768px){}
    .elementor-397 .elementor-element.elementor-element-1225a85 {
        width: 23%;
    }
    }
    Hannes Fuchs

    thats fine, thank you.

    Alexander Hutsol Support Team

    Hello,

    You are welcome 🙂

    Feel free to create a new topic if you have any other questions.

     

    Regards.

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