- This topic has 8 replies, 2 voices, and was last updated 8 years, 6 months ago by Mahesh.
-
AuthorPosts
-
June 9, 2016 at 7:27 pm #93265robertlParticipant
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,
RobJune 9, 2016 at 7:44 pm #93268robertlParticipantIgnore 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,
RobJune 10, 2016 at 10:14 am #93285MaheshParticipant@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,
MaheshJune 12, 2016 at 5:59 am #93354robertlParticipantHi 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,
RobJune 12, 2016 at 7:02 am #93355robertlParticipantHi 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.jsLet me know if you can find a work around for this
Thanks heaps Mahesh!
June 13, 2016 at 9:55 am #93425MaheshParticipant@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,
MaheshJune 13, 2016 at 10:13 am #93430robertlParticipantI’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>
is removed instead?
Cheers
RobJune 13, 2016 at 10:21 am #93434robertlParticipantHow 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;
}June 13, 2016 at 4:14 pm #93466MaheshParticipant@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 -
AuthorPosts
- The topic ‘Mobile menu not working (possible CSS issue?)’ is closed to new replies.