Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • December 18, 2019 at 8:34 am #1167148
    ewingmh

    HOME

    I’d like to have the background be transparent behind JUST the logo while having a white background behind the menu and move the full screen slider up behind the logo. Like this:

    View post on imgur.com

    December 18, 2019 at 11:27 am #1167218
    Guenni007

    hm – what i can not believe is that your home page is not declared as it is. : home – but nevertheless we can address that page via its id:

    .page-id-45 .av-section-bottom-logo.header_color {
    position: absolute;
    z-index: 5;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(255,255,255,0.5) !important
}

    you decide what looks best on transparency options.

    December 18, 2019 at 11:35 am #1167222
    Guenni007

    By the way – what kind of chairs are these? They look a bit like “upholstered Arne Jacobsen chairs”.

    edit : thanks i found it: “Armen Living Cassie Dining Chair”

    December 18, 2019 at 1:33 pm #1167260
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did you try that out and did you have any luck with it @ewingmh?

    Best regards,
    Rikard

    December 18, 2019 at 5:41 pm #1167403
    ewingmh

    Ha – yea I understand the confusion – I’m making this as a favor for a friend – and just noticed that the landing page gets screwed up as well if you choose that option for a menu configuration. I’ll migrate everything to a dev server and then see if I can get it to work correctly there. I’ll circle back around after the migration. Thanks

    December 19, 2019 at 5:41 am #1167595
    Rikard

    Hi,

    Thanks for the update, we’ll leave this thread open in case you should need any further help.

    Best regards,
    Rikard

    December 21, 2019 at 10:37 pm #1168531
    ewingmh

    seems to work on the dev server; https://www.crestedbuttecomputers.com/dev/paradisecb/

    Thanks!

    December 22, 2019 at 7:09 am #1168551
    ewingmh

    Doesn’t work on mobile though – any help?

    December 22, 2019 at 9:27 am #1168555
    Guenni007

    just use the css from above only for your non responsive case:

    @media only screen and (min-width:990px) {
	.av-section-bottom-logo.header_color {
		 position:absolute;
		 z-index:5;
		 left:50%;
		 -webkit-transform:translateX(-50%);
		 transform:translateX(-50%);
		 background:rgba(255,255,255,0.0) !important
	}
}

    you had to style the header logo for 768px to 990px – because i think you would like to have logo too on left side as it is on 768px and smaller.
    It comes from that rule ( don’t know where it is from because you have allready merged the css):

    .html_header_top.html_logo_center .logo {
left:50%; 
-webkit-transform:translate(-50%,0); 
-ms-transform:translate(-50%,0);
transform:translate(-50%,0)
}

    so maybe you use another media querry for it:

    @media only screen and (min-width:768px) and (max-width:989px) {
	.html_header_top.html_logo_center .logo {
		left: 0;
		-webkit-transform: none; 
		-ms-transform: none;
		transform: none
	}
}

    maybe an !important is necessary – we will see

    December 23, 2019 at 5:49 am #1168657
    ewingmh

    And… what if they want to add the phone number extra element above the menu?

    HOME

    Thanks

    December 23, 2019 at 3:56 pm #1168750
    Guenni007

    what do you think could be done if there is an additional height on top of 30px ? …
    ( it is now translateXY – and that is shortend to translate( x, y) )

    @media only screen and (min-width:990px) {
 .av-section-bottom-logo.header_color {
  position:absolute;
  z-index:5;
  left:50%;
  -webkit-transform:translate(-50%, 30px);
  transform:translate(-50%, 30px);
  background:rgba(255,255,255,0) !important;
 }
}

    you don’t adjust the logo for between 768px and 990px – thats a wanted variant – or have you forgotton to add this rule:

    @media only screen and (min-width:768px) and (max-width:989px) {
	.html_header_top.html_logo_center .logo {
		left: 0;
		-webkit-transform: none; 
		-ms-transform: none;
		transform: none
	}
}
    December 23, 2019 at 4:50 pm #1168765
    ewingmh

    Thanks for the condescending tone – I had tried all sorts of variations of the same – doesn’t work.

    Thanks
    Mark

    December 24, 2019 at 8:40 am #1168895
    Guenni007

    Sorry, that was my mistake – I only replaced the transform code and not the webkit-transform code.

    @media only screen and (min-width:990px) {
 .av-section-bottom-logo.header_color {
  position: absolute;
  z-index: 5;
  left: 50%;
  -webkit-transform: translate(-50%, 30px);  /*** only translate not translateX because here are x,y values ***/
  transform: translate(-50%, 30px);   /*** only translate not translateX because here are x,y values ***/
  background: rgba(255,255,255,0) !important;
 }
}
    December 24, 2019 at 9:29 am #1168900
    petsrdjan

    Hello. Is there an opportunity to get this effect on the mobile version and a different bit on the desktop version of the site?

    Link of images

    • This reply was modified 4 years, 11 months ago by petsrdjan.
    December 29, 2019 at 11:57 am #1169064
    Vinay

    Hi,

    Thank you for contacting us.

    To centre the logo please follow the step by step instructions provided in the documentation

    Menu

    To achieve a transparent header in mobile please check the below link

    Header

    Let us know if you have any questions, we are happy to help you :)

    Best regards,
    Vinay

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