Forum Replies Created
-
Posts
-
Ahh you touched on something I had not tried. I had the background as scroll. I then tried fixed which made the background disappear until I scrolled past the section. Setting it on parallex has seemed to solve the height issue but strangely the background is behaving as if it is fixed, not showing any parralex effect.
If you can take a look as to why this is behaving this way it would be great for my future understanding.
Below are credentialsYes. Setting at 100% makes it worse. Setting a positive custom height does not seem to effect but setting a negative height seems to minimize the overlap but does not eliminate it. I still have the text block and image slideshow in their column elements still extending below the background of the color section.
Hi,
The link to the page being developed is below.
Specifically look at the h2 tag in each portfoilio item which is a website client name (ie: FIreGlass Studio, Sensor-Kinesis).
I have given the text box element a custom css class of “center-content”
In Quick CSS I have added the following:
@media screen and (min-width: 768px){
.center-content {
margin-top: 50%!important;
}
}
<This seems to work fine for the container sizing issue>
.center-content h2 {
line-height: 2em!important;
font-family: ‘Dancing Script’, sans-serif!important;
}
<The line height call is working but the font-family is not.>Thanks
I am sorry John. That was a typo on my part. It should have read:
h3 {
font-family: ‘Poiret One’, Sans-Serif!important;
}
Would this be the correct way to try and call the Poiret One font to be what the h3 tag displays?As you can see in my first post, I did use the !important. For a font that is in the Enfold family like Poiret One, Moligo or Merriweather (just to name a couple), am I correctly calling the font-family with the following:
h3 {
lfont-family: ‘Poiret One’, Sans-Serif!important;
}Hi Rikard,
Nice to speak with you again.
This was not an imported font. It is one of the theme supported fonts.
I can call it from the advanced styling just fine, but when I try to call it from Quick CSS to overide, I can’t seem to get it to work.
Hope that answers.
TonyJosue
Thanks but that did not seem to have an effect. Do I need to call the form a different way rather then through a button linking to an iframe?The link is below. Currently on the middle box the Contact Form link is opening a page in a lightbox instead of the form directly. Per above I would like to be able to have the whole form open up in a lightbox and not just a partial iframe.
ThanksRicdean,
Glad you found solution. As I doing this on a one-page site as Portfolio section, I can’t create a sub menu for this. I do see how that would work though if this was on a dedicated page.Rikard,
Sorry for MY late reply.
Below is the link and creds you need to look at the page in question.
This is an early dev site so pardon the mess.Andy,
Ok let’s forget everything thus far.
I have adjusted code back to where everything is working as I was hoping except for one thing.
On all sub-pages in the site, I want to remove the header background image and the header text widgets so that the nav bar and a banner (in an image slider) appear at the top.
I have this working now on everything except a mobile device.
On a mobile device because I am hiding the av-logo container the mobile menu is not visible on the sub-pages; only the home page.
Is there a way for to get the mobile menu and the logo to appear as I am indiciting in the image below:
Let me know if you need more clarity.
Thanks again.Thanks Andy,
So we may be working cross purposes here since there are two things I am trying to do that are being addressed on two different support tickets.
This thread was originally about finding a way to hide the Header image, header widgets and logo on all pages but the Home page.
You helped me out on this as you can see at the top and we almost had that solved except for the gap issue on sub-pages and that the mobile nav menu disappeared.
It seems with this code:
@media only screen and (max-width: 767px) {
.container.av-logo-container {
display: block;
}
#header_main {
margin-bottom: 0;
}}We are getting the menu back, but by forcing the header image, logo area to appear on all pages which is what I was trying to avoid.
I am afraid the various code bits are now working against each other.
So first question is, should I just consolidate all the issues into a new ticket on where we are at or if not then:
1. If I leave the previous code in place that you gave me to hide the header elements on all pages but the home page:
.container.av-logo-container, #text-10, #text-13 {
display: none;
}
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px;
}
And for your homepage:.page-id-734 #main {
padding-top: 200px !important;
}
.page-id-734 .container.av-logo-container, .page-id-734 #text-5 {
display: block;
}
.page-id-734 #text-6 {
display: block;
}then is there a way to display the mobile menu (but not the logo container) which is hidden by this code on a mobile device?
Again I apologize if this is getting confusing. It is to me.
Thanks again.Andy,
I am not sure if I understand. Which code am I replacing. Both of the blocks:
@media only screen and (max-width: 767px) {
#header_main {
margin-bottom: 265px;
}}
and:
.container.av-logo-container, #text-5, #text-6 {
display: none;
}Or just one of the.
It appears if I just delete
.container.av-logo-container, #text-5, #text-6 {
display: none;
}and put in your two code blocks, I get the mobile menu on a smart device, but I also am still seeing the header image and logo on the sub-pages (which I am trying to hide) and the text 5 and 6 header widgets are still displaying on the sub-pages.
Could you clarify?
Thanks.and put in the code you suggest, I get the mobile menu, but I still see the heaqder
So the following is what is creating the grey space on the mobile:
@media only screen and (max-width: 767px) {
#header_main {
margin-bottom: 265px;
}}
But even if I shrink it or remove it, I still do not see mobile menuThis code when removed allows me to see the mobile menu:
.container.av-logo-container, #text-5, #text-6 {
display: none;
}
But then the header widgets and logo image header are visible on all pages.Does this help?
Hi Vinay,
Thanks.
So I see where this works on the desktop/tablet view, but on a mobile, I still see the space and still cannot see the mobile menu.
Second, since I am only needing to see this extra space on the homepage, it seems my having to add this code for all the other pages and any new ones created, is going to be pretty cumbersome. There are currently 200+ pages/posts on the sites and because of thier podcast it is at least one new page a week.
Is there not a way to attack this from the other direction that says modify this only on page-id rather than add this on all pages then have to make an exception for all pages but the home page?I am ok with it although that piece of CSS is going to be pretty big and I don;t know if that then creates some processing issues. I do though need to resolve the mobile view and nav bar visibility if possible.
Thanks again for your time and consideration.Andy,
Sorry, I am not trying to gang issues. I just want to make sure there is not conflict in the issues.
I have put the code you suggested back in and you can go see what it looks like on a desktop and mobile.On mobile the Mobile menu is no not visible on sub-pages. There is just the large grey area.
Andy,
When I add that in, it does do what you see on the mobile, but then on the desktop it displays like this:
I have taken out the code for now, but below I have given you admin creds to go check yourself if you wish.
Just to refresh as this has been a long thread and is combining with some other customizations, here is what I am trying to do:
1. I am trying to have the header image/logo appear on the home page but none of the sub pages.
2. On the home screen I have the two widget boxes that display inline on full screens but then display in list when on mobile screen.
3. On all sub-pages, I do not need to see these widgets and also I do not want to see the logo or header background image.
4. On all sub-pages I do want just the nav bar strip to be sticky.I currently have the following bits of Quick CSS that are involved in this as follows:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
margin-top:20px!important;
color:#ffffff!important;
}.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 50px;
}.container.av-logo-container, #text-5, #text-6 {
display: none;
}.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px;
}.page-id-734 .container.av-logo-container, .page-id-734 #text-5 {
display: block;
}#text-5 {
left: 65% !important;
}.page-id-734 #text-6 {
display: block;
}#text-6 {
left: 85% !important;
transform: translate(100%);
}div#text-5 {
top: 83px !important;
left: 125px !important;
}div#text-6 {
top: 207px !important;
left: 125px !important;
}@media only screen and (max-width: 767px) {
header#header {
height: 400px;
}
}@media only screen and (max-width: 767px) {
.responsive .logo img {
max-height: 60px;
}
}Also, on the Header > Header Behavior I have the Stick Menu box checked (all other options unchecked)
Sorry if this is getting convoluted. I do appreciate all your help.Ismael,
That code was a suggestion from Andy on this thread: https://kriesi.at/support/topic/add-multiple-widgets-to-header/
The full code is:
@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}
}I believe the idea was to allow the two header text widgets a space to float under the logo on mobile screens.
If I remove the code, yes the space goes away but the mobile nav box is still not visible on the sub-pages.
I did try targeting the code above just to the homepage ID, but it did not solve the problem.
Thoughts?
