[doughballsParticipant]

Hello.

I’m trying to do something very simple but I’m encountering an error – I want to create a slideshow with a selection of images using the background image feature. In the ‘edit page’ section I have set multiple background images, chosen from my uploads folder, and they are showing up in the ‘background image(s)’ section. However, nothing is showing up when I view the page. If I inspect the page I get this error:

Uncaught TypeError: jQuery.backstretch is not a function

Any ideas?

http://seandoherty.co.uk/mcswp2/

[RupokMember]

Hi there,

Thanks for writing in! It seems you are using older version of theme and plugins that might cause the issue on newer version of WordPress.

Can you confirm that you are fully updated? (Theme and Plugins)

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

[doughballsParticipant]

Hi Rupok. Just to clarify – I’m working on a site (MCS) and as I’m new to all this, I’ve built two versions while I play around, and they are both hosted on my personal website space. Could this be the problem? Because the link I sent you was to the 2nd version (/mcswp2). If I log into the wp-admin for this I don’t get any prompt to update, and I just had to manually update by replacing the x theme with the latest download (which hasn’t fixed the issue), and it isn’t acknowledging that I’ve updated to the latest theme.

When I logged into the first version of the site last night (same address but /mcswp) it forced me to input my purchase code to update, which seems to have triggered auto updates, and the backstretch stuff is working fine, so I’m solely working on this now. Am I right in thinking the issue is having the x theme working on two separate version of the same site?!

While we are talking, I do have another couple of things I’d like help with:

1. Too much white space on the navbar at various points.
At full size the navbar is fine, but if you reduce the screen size (but before the menu collapses) I get a doubling of the white space at one point, then it reduces by about 20px just before it collapses and the menu button appears. I don’t want the navbar to change height at all, it is a waste of space.

2. In relation to this, when you click the menu bar button, the drop down is way too big – there’s about 100px below the last menu item. I want this to be as trim as possible.

3. And in relation to this, I think a round menu button would work better on the site. Could you show me how to style this? Remove the drop shadow, maybe have it 1px outline in light grey, possibly add bars inside at slightly different widths to account for the curved sides?

The page in particular is:

http://www.seandoherty.co.uk/mcswp/about-us

Thanks!

[doughballsParticipant]

Ok. So I was just working on the site in the customizer, trying out some custom jquery (trying to get the faded div to slide up from the bottom), the page quit and now the site is unreachable. I can’t view the site at all, or even log into the wp-admin…!

UPDATE: the site died for about 10 mins then came back to life…!

UPDTAE 2: I tried setting #top to be 75px, which gave me the desired height, unchanged as I made the screen smaller – BUT! – I then got a slider along the top right of the header/navbar when the menu button appeared. Not at all what I wanted! So I took off my custom CSS.

[Paul RModerator]

Hi,

Please install the required plugin cornerstone in /mcswp2 and make sure to update theme and plugin to latest versions

X Theme 4.4.2
Cornerstone 1.2.4

For 1,2 & 3

You can add this under Custom > CSS in the Customizer.

body .x-container.offset {
    margin: 0 auto !important;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto !important;
}

body .x-btn-navbar, body .x-btn-navbar:hover {
    box-shadow: none;
    color: #fff;
    padding: 10px;
    border-radius: 20px;
}

Hope that helps

[doughballsParticipant]

Hi, thanks for this – it certainly worked! The only thing is the button is not a true circle, I’ve tried all manner of radius and it still appears as a slightly elongated circle. I’d also like it to be outlined, not solid, could you tell me how to manipulate this? Also, there is a slight problem, just before the mobile button appears, the navbar gets a slider at the far right.

Lastly, I’m trying to incorporate a drop down menu. If you hover over Projects (and services), I’d like a drop down directly beneath the item hovered over. Maybe a white background with the new options stacked, coming down below the main image. Is this doable, seeing as I’ve set the navbar to be quite a narrow height? Currently, I get the right hand slider, with the two new pages scrollable, which looks pretty awful!

[Rue NelModerator]

Hello There,

The button is not a perfect circle. You need to update your custom css code. Please use this instead:

body .x-btn-navbar, body .x-btn-navbar:hover {
    box-shadow: none;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
}

The sub menu is not properly displaying because of a css conflict. Please temporarily remove your custom css to find out which block is causing it.

Hope this helps.

[doughballsParticipant]

Hi Rue, thankyou. Changing the border radius to 50% still doesn’t create a perfect circle, for some strange reason! This I can live with though, so let’s forget about it.

I followed your instruction and took out all my custom CSS and this did not fix the issue – see screenshot. I also went into the customizer and checked the navbar settings – it was set to 0, and I tried changing it to auto, and then 200/300, and still, when you hover over project, I’m getting a slider bar on the right, with the menu items way way down the page. Is there a drop down menu info page that I can look at? I read the megamenu page but it’s not really relevant and there isn’t really any information on how to tweak the position or appearance of any drop downs.

[RadModerator]

Hi there,

A perfect circle is only possible for the element that is square (equal width and height). A button is mostly rectangle since the caption takes the width and not height.

Please check this,

https://css-tricks.com/almanac/properties/b/border-radius/

#example-seven, #example-eight {
   border-radius: 50%;
}
#example-eight {
   width: 200px;
}

Same border radius but different element dimension.

And please provide a mockup design of your target result.

Thanks.

[doughballsParticipant]

Thanks, something like the attached. If the white box that drops down needs to be the whole width of the screen, (rather than just the width of the sub-menu items) that’s not too much of an issue for me.

Also – I’ve just looked at my licence details and its showing the current development site/address as being in production. I didn’t assign this and I hope there’s a way of re-assigning it to the real site once I have finished developing it. Can somebody confirm that this is the case?

[FriechModerator]

Hi There,

I think it would be best if we add the Image as an Image element or a custom banner underneath the menu, rather than making it as a background.

I see that you have some text content hidden under the menu, would you mind to clarify what is that for? that seems to be causing an issue with the menu bar. The sub-menu is not overflowing on the content, but instead creating a scrollbar on the header itself. The custom CSS below that is on your customizer seems to be the culprit of that issue.

.aboutBar {
position:fixed;
bottom:0;
left:0;
height:auto;
max-height:0;
width:100%;
background-color:#191919;
opacity:0.5;
transition: 2s max-height ease-in;
}

If you would not mind, please implement the image as a content of the page and not as a background and lets take it from there.

Regarding the assigning of license. Yes, you can re-assign the license to your production site when it is ready to pushed live. Just click the little x icon next to the site URL to unassign the development domain.

Cheers!

[doughballsParticipant]

Hi. Thanks for clarifying the license query 🙂

Ok, the custom CSS you posted above relates to the text bar at the bottom of the about page. It has been set to 0 height, and a custom jQuery function allows it to slide up to it’s desired height on load. This element is locked to the bottom of the screen so not sure why it would cause a problem to the menu bar at the top?

Can you please tell me how to insert the image into the page so that it appears full screen and is responsive, as it is now? Also, on the home page, I have a series of background images that are on rotation, and I don’t know how to have this feature other by using the themes own backstretch function (by adding multiple images instead of just 1).

Also, I removed all the CSS as previously instructed, and this did not fix the menubar issue.

[FriechModerator]

Hi There,

I’m really sorry I did not realize that is the same text that is showing below on that page. Anyways this is the problem that I’m seeing on the menu bar.

It does not show the sub-menu when you hover over the parent, but instead it adds a scrollbar on the right side.

You can address that by adding this on your custom css

@media (min-width:  980px) {
	.site {background-color: transparent;min-height: 40vh;}
	.site .masthead {background-color: #fff;}
}

And this is for the sub-menu styling:

.site .masthead-inline .x-navbar .desktop .sub-menu {
	min-width: 150px;
	left: 30px;
    background-color: #fff !important;
}

If this does not solve the issue or If you have any additional questions. We kindly ask that you clarify them on your next reply, as the topic kind of drift off which is difficult to support.

Cheers!

[doughballsParticipant]

Hi Friech. Thanks, but this hasn’t worked. It has part-worked in terms of the styling. I’ve kept your CSS in and saved it. I’ll try to be clear:

Problem: When you hover over projects, the drop down sub menu is displaying behind the main background image, and a scroll bar on the far right appears. The Site title (Mazur) and the navbar options (About us, services etc) then scroll up and off the top of screen.

Fix: The drop down sub menu should appear directly below projects, as you’ve styled it, but displaying over the main background image, as in the screenshot I have attached. The main site title and navbar options should never move from the top of the screen, displayed at all times.

Apologies if my previous messages caused confusion, and thanks for your patience with me!

[Rue NelModerator]

Hello There,

This is what I see in your site:

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[Author]

Posts