Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 15, 2019 at 9:37 am #1054019
    goodpixel

    Hello, I try to use this snippet (https://kriesi.at/documentation/enfold/menu/#logo-center-split-menu) but I need logo with 100% dimension (https://almarexhaust.com/2019/)

    
/* Split menu
----------------*/

@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
  /* Adjust the width of the logo */
    margin-right:150px;
}

#header .main_menu {
    /*background: gold;*/
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}

#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}

#header .logo img {    
    top: 50%;
    transform: translateY(-50%);
    max-width: 100px;  
}
}
    January 15, 2019 at 9:47 am #1054024
    goodpixel

    I need to replicate this header https://almarexhaust.com/

    January 16, 2019 at 10:44 pm #1054784
    Basilis

    Hi,

    Convert
    #header .logo img {
    top: 50%;
    transform: translateY(-50%);
    max-width: 100px;
    }

    to
    #header .logo img {
    top: 50%;
    transform: translateY(-50%);
    max-width: 300px;
    }

    Let us know if it works out for you.
    Best regards,
    Basilis

    March 30, 2020 at 9:42 am #1199023
    jannnnnneke

    Hi! I also tried the code snippet above, but how can I make the logo bigger? The logo in transparent header is now max 100px width, while the logo is much bigger. I tried changing the max-width to 200px but then half the logo is visible. Any ideas? See link in private data!

    Thanks!!

    April 10, 2020 at 5:21 am #1202558
    Ismael

    Hi,

    You can use this css code to adjust the width of the logo.

    #header .logo img {
	top: 50%;
	transform: translateY(-50%);
	max-width: 200px;
}

#header .logo, #header .logo a {
	width: 200px;
}

    The menu will have to be adjusted afterwards.

    Best regards,
    Ismael

    April 22, 2020 at 3:05 pm #1206213
    jannnnnneke

    Thanks, that’s working but now my default header is also changing. I only want to apply these css codes to the transparent header. How can I do that?

    Tried to add .av_header_transparency to the css codes, but not working.

    Thanks!

    April 26, 2020 at 10:25 pm #1207382
    Mike

    Hi,
    Sorry for the late reply, this is how the css would look to only apply it to pages with a transparent header:

    #header.av_header_transparency .logo img {
	top: 50%;
	transform: translateY(-50%);
	max-width: 200px;
}

#header.av_header_transparency .logo, #header .logo a {
	width: 200px;
}

    I notice that on your other pages the logo was sitting to the left a little, this css would correct:

    #header .logo img {
	 margin: auto;
}

    Best regards,
    Mike

    April 27, 2020 at 6:11 am #1207430
    Hokuspokus

    Dear Support,
    PS: This is often a query from clients. Can you insert this as an additional header element in a next update, please?

    Thanks,

    S.

    April 28, 2020 at 1:03 pm #1207772
    Mike

    Hi,
    I have submitted a feature request for the dev team to review.

    Best regards,
    Mike

    May 13, 2020 at 10:00 am #1212550
    jannnnnneke

    Thanks Mike, it’s working. The only problem I have is the logo at default header is aligned left. The size is different than the transparent header. How can I fix that? See link!

    May 13, 2020 at 1:27 pm #1212606
    Mike

    Hi,
    Do you mean that for mobile the logo is not centered? If so, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) { 
#header .logo {
	top: 50%;
	transform: translateX(70%);
	max-width: 200px;
}
}

    but the mobile header is only 80px high, so the logo is also 80px. Do you want your mobile header 200px high so your logo can also be 200px?

    Best regards,
    Mike

    May 13, 2020 at 1:32 pm #1212608
    jannnnnneke

    Hi! Sorry I think I’ve created it the way I want now. Had to change the default logo to left: 53% in stead of 50% and change the margin-right in the first CSS code in this topic.

    Thanks!

    May 13, 2020 at 1:44 pm #1212612
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Logo center and split menu left right’ is closed to new replies.