Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 2, 2020 at 3:37 pm #1180672
    breezemedia

    Hi there,

    i’d like to create a nice big header, with
    – Logo centered and Menu below

    BUT, if i scroll down, and the sticky header shrinks, i’d like to change the position
    So the shrinking, sticky header has position:
    – Logo left and Menu right.

    February 3, 2020 at 12:29 pm #1180868
    Victoria

    Hey breezemedia,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    February 12, 2020 at 10:34 pm #1184003
    breezemedia

    i send you a link in PM

    February 14, 2020 at 3:41 pm #1184521
    Victoria

    Hi breezemedia,

    I do not see any changing logo position here.

    Header

    Enfold has the Logo center + Menu below position, you just need to rearrange it when the user scrolls.

    Best regards,
    Victoria

    February 22, 2020 at 1:08 am #1186887
    breezemedia

    sorry, i don’t really see that issue in the documentation.
    – what are the classes to manipulate in Quick-CSS to rearrange the logo and menu in the shrinked header?

    As you can see in the example:
    – Logo centered and Menu below

    sticky shrinking header
    – Logo left and Menu right.

    Maybe you can link the correct site on documentation or give me any hint?

    February 24, 2020 at 12:44 pm #1187294
    breezemedia

    Hi, i really tried every forum-hint on that.
    What is the ID or class for the shrinked Logo Positon.
    for example
    .scrolled-header does not work

    When i look to the css, i can not see a special class for that changed settings in shrinked header…

    Please give me any hint

    February 26, 2020 at 2:57 am #1187922
    Ismael

    Hi,

    Sorry for the delay. You can use the following css code to adjust the position of the logo and main menu when the header shrinks or during scroll.

    @media only screen and (min-width: 768px) {
.html_header_top.html_logo_center .header-scrolled .logo {
	position: relative;
	left: 0;
	transform: none;
}

.html_header_top.html_logo_center .header-scrolled #header_main_alternate {
	position: absolute;
	right: 0;
	top: 30px;
}
}

    Please don’t forget to toggle the Performance > File Compression settings after adding the code.

    Best regards,
    Ismael

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