[robertl]

Hi Support,

Our site’s mobile menu isn’t working anymore for some reason: http://tuanzbuild.tuanz.org.nz/

We had this issue before and it was because the main TUANZ logo was too far to the left and was conflicting with the mobile menu of which this was done by CSS. I have completely removed the code and checked all css but unable to fix it.

Current CSS code as follows:

.site-title {
display: none;
}

/*This code hides page title but still maintains the title on featured content*/

#main .page header.entry-header{
display: none;
}

/*SOCIAL MEDIA ICONS CSS BELOW*/

.site .widget_catchresponsive_social_icons a.genericon {
background-color: #fff;
border-color: #fff;
color: #fff;
text-decoration: none;
}

.site .widget_catchresponsive_social_icons a.genericon-facebook-alt {
background-color: #3b5998;
border-color: #3b5998;
}

.site .widget_catchresponsive_social_icons a.genericon-twitter {
background-color: #00aced;
border-color: #00aced;
}

.site .widget_catchresponsive_social_icons a.genericon-linkedin {
background-color: #007bb6;
border-color: #007bb6;
}

.site .widget_catchresponsive_social_icons a.genericon-youtube {
background-color: #bb0000;
border-color: #bb0000;
}

.site .widget_catchresponsive_social_icons a.genericon-instagram {
background-color: #517fa4;
border-color: #517fa4;
}

/*SOCIAL MEDIA ICONS CSS ABOVE*/

/*Changes Main backgroundcolour*/

#content, #main, #site-generator
{
background-color: transparent;
}

/*Main heading CSS transparent etc…*/

.nav-primary {
background-color: transparent;
border-top: 0px solid #000;
border-bottom: 2.5px solid #2B4C66;
}

/*This is the spacing between main menu and featured slider*/
.catchresponsive-nav-menu{
padding-bottom: 0px;
}

.catchresponsive-nav-menu .current-menu-item > a, .catchresponsive-nav-menu .current-menu-ancestor > a, .catchresponsive-nav-menu .current_page_item > a, .catchresponsive-nav-menu .current_page_ancestor > a {
background-color: transparent;

}
.catchresponsive-nav-menu li:hover>a {
background-color: #9CCCD4;
}

.catchresponsive-nav-menu li:hover > a,
.sidebar-header-right .widget_nav_menu li > a {
background-color: transparent;
color: #000;
}

.catchresponsive-nav-menu .sub-menu li:hover>a {
background-color: #9CCCD4;
color: #000;
}

.catchresponsive-nav-menu a {
color: #2B4C66;
}

#feature-slider{
padding-bottom: 1;
}

/*Featured content and welcome to TUANZ transpraent BG css*/

#promotion-message, #featured-content {
background-color: transparent;
}

.catchresponsive-nav-menu {
font-size:13px;
}

/*Transparent fix in sub menu*/
.catchresponsive-nav-menu .sub-menu a {
background-color: #fff;
font-size:12px;
color: #2B4C66;
}

/*Featured Content MAIN heading red color*/
.home #promotion-message h2,
.home #featured-heading,
.home #featured-content .entry-title {
color: #E60000;
}

/*Featured Content SUB headings color */
#featured-content .entry-title a {
color: #2B4C66;
}

/*This makes the Welcome to TUANZ message fill up to the right side of screen*/
#promotion-message .left{
max-width:none;
}

/*Welcome to TUANZ title color*/
.home #promotion-message h2
{
color: #2B4C66;
}

/*Featured Content title color*/
#featured-content .entry-title{
color: #2B4C66;
}

/* Colors read more link and fixes underlining issue from broadband map*/

a.more-link {
border-bottom: none;
color: #9CCCD4;
}

Could you please assist?

Regards,
Rob

[robertl]

Ignore my post above.. I found out the problem was the National Broadband Map javascript widget at the bottom of our home page is conflicting with the mobile menu somehow.. Would you happen to know why this is happening and if there is any work around for this please?

Javascript code for the widget is as follows:

<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js” type=”text/javascript”></script>
<script src=”//broadbandmap.nz/static/javascripts/bbmwidget.js” type=”text/javascript”></script>

<div id=”bbmwidget”></div>
<script type=”text/javascript”>
broadbandmap({
div_id: ‘bbmwidget’,
addressfinderkey: ‘testKey’,
map: true,
map_height: 520,
map_key: true,
address_label: true,
technologies: [‘ADSL’, ‘Fibre’, ‘Wireless’, ‘VDSL’, ‘Cable’],
});
</script>

Cheers,
Rob

[Mahesh]

@robertl: Are you using plugin. Seems the the script is creating a conflict. Jquery is already enqueued in WordPress.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
This script enques it again and may cause error.
Let me know further.

Regards,
Mahesh

[robertl]

Hi Mahesh,

Yup we’re using a plugin to display the javacsript. We can also enable this javascript by entering the code directly into the page’s HTML editor.

Another problem we’re having is our search results. When searching, there should be title of the searched results but the titles aren’t showing anymore (they were before). thinking it might be to do with our css but can’t quite point it out: http://tuanzbuild.tuanz.org.nz/?s=member <- here is a sample search results using keyword “member”

Kind regards,
Rob

[robertl]

Hi Mahesh,

I checked the source of the page there was the only one instance of the javascript input. This shows that the library was not there.
Library – http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js

Let me know if you can find a work around for this

Thanks heaps Mahesh!

[Mahesh]

@robertl: You’ve custom CSS to hide title from the site, that is why its not displaying in search results. For displaying titles in search results page, go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

/*This code shows page title on search page but still hidess the title on other pages*/
.search #main .page header.entry-header {
	display: block;
}

I checked your site’s source again and found two jQuery libs.
1. WordPress’s own jQuery Lib
<script type='text/javascript' src='http://tuanzbuild.tuanz.org.nz/wp-includes/js/jquery/jquery.js?ver=1.12.3'></script>
2. May be from some plugins or so.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

Regards,
Mahesh

[robertl]

I’ve have previously tried removing the:

<script src=”//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js” type=”text/javascript”></script>

it won’t show anymore.

Would there possibly be a work around for this? Or, what happens if the:

<script type=’text/javascript’ src=’http://tuanzbuild.tuanz.org.nz/wp-includes/js/jquery/jquery.js?ver=1.12.3′></script&gt;

is removed instead?

Cheers
Rob

[robertl]

How would you also change the color of the titles in the search? Have been trying but doesn’t change

.search #main .page header.entry-header {
display: block;
color: #9CCCD4;
}

[Mahesh]

@robertl: Seems, you’re using a twitter widget, which is causing a script error. May be it is causing the issue. Please try deactivating all your plugins and check if it resolves the issue.

Add the following CSS for changing color of titles in search.

.search #main .page header.entry-header .entry-title a {
    color: #9CCCD4;
}

Regards,
Mahesh

[Author]

Posts