Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 5, 2021 at 2:47 pm #1270410
    Alexander2021

    Hi,

    I am trying to style the header (logo/menu area) on my site. 2 issues:

    1.
    I want to adjust the logo position (a bit lower). I tried the solution found at https://kriesi.at/support/topic/adjust-logo-position/ but this is not working. Also the menu items should be a bit lower so the rounded/colored call-2 action / phone-button dont stick to the top. So best is to lower logo + menu items at once.

    2.
    The colored bar below active menu items (active menu indicator) are not sticking to buttom of header bar, but sit higher, close below to the menu items. I have this issue also on my other website, where it only occurs on my frontpage and not on the other pages.

    See private content for links

    Thanks, Alexander

    January 7, 2021 at 4:44 am #1270758
    Ismael

    Hey Alexander2021,

    Thank you for the inquiry.

    1.) We can use this css code to adjust the vertical position of the logo, but this might cause the logo to drop outside the header container. You may need to adjust the height of the header as well. 

    div .logo {
	top: 10px;
}

    2.) The indicators are actually sticking to the very bottom of the header bar, but it does not look like it because there is an extra space or container between the header and the main content, which has the same background color as the header. This space is actually created because of the 88px top padding applied to the main container. To adjust that space, you can use this css code.

    .html_header_top.html_header_sticky #main {
	padding-top: 44px !important;
}

    Default value is 88px. Again, you may need to adjust the height of the header to make room for the logo adjustment.

    Best regards,
    Ismael

    January 7, 2021 at 4:42 pm #1270900
    Alexander2021

    Hi,

    With regard to the positioning of the active menu indicator, the solution above does not work.

    Please have a look at my other website (see link in private secion) to see what it should look like:
    > menu bar is large at first and shrinks when scrolling down, logo shrinks as well (theme options setting shrinking header)
    > the active menu indicator aligns to the bottom, in both cases (when bar is large and when bar is shrunk)

    I don’t understand why it does not work like this on this site, and also i do not understand why logo is not shrinking when scrolling down.

    The header settings are exactly the same on both websites

    January 7, 2021 at 4:44 pm #1270902
    Alexander2021

    see also the theme demo https://kriesi.at/themes/enfold/ to see what the header behavior should look like

    January 11, 2021 at 3:17 am #1271439
    Ismael

    Hi,

    Yes, we understand. And as we explained it looks like it’s not working correctly because there is an extra space below the header, which looks like an actual part of the header but is actually a space created because the main container has a top padding. The header is only 44px in height and the code above should adjust the top padding of the main container so that it is not twice as tall as the header.

    Best regards,
    Ismael

    January 11, 2021 at 2:45 pm #1271597
    Alexander2021

    Hi Ismael,

    With your solution, the ‘shrinking header’ effect disappears. And that is of course not the intention.

    The shrinking header effect is a basic setting from the theme options and should become correctly effective after it is set via the theme options, like it does on my other website.

    I also haven’t set an ‘extra space below the header’ so I don’t understand where that comes from. Without your code the shrinking header effect works, but the active menu indicator does work like on the Enfold demo page I mentioned. The logo also does not shrink, but remains static.

    What other solutions could we try?

    Best regards,
    Alexander

    January 13, 2021 at 1:33 pm #1272150
    Alexander2021

    Hi Ismael,

    I have found my solution for the shrinking navbar here: https://kriesi.at/support/topic/shrinking-header-stays-shrunk/#post-1271837

    But the issue with non shrinking logo remains: So, why is the logo not shrinking?

    Best regards, Alexander

    January 13, 2021 at 4:59 pm #1272217
    Alexander2021

    Fixed the second issue as well; logo image had to be set to full size in order to activate shrinking effect

    topic can be closed

    January 14, 2021 at 6:14 pm #1272497
    Ismael

    Hi,

    Glad to know that you have found the cause of the issue. We hope that we could help you better in the future. Please feel free to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘style logo / menu area’ is closed to new replies.