Design Locker

Andrew, if you were beside me I would kiss you. Genius. Thank you so much.

I played around with what you said above and this is all that was required to get it working;

@media screen and (min-width: 771px) {
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none !important;
}

.main-navigation ul.nav-menu.toggled-on {
display: inline-block !important;
}
}

It is people like you that make WordPress so successful. Thanks again.

Hi Andrew,

Thanks for the reply.

At 768 (and below) I want the menu to hide and the toggle button to appear . As it stands, the menu appears vertically in full without the need to press “Main Menu”.

I want it to work at 768px & 600px as it currently does at 568px and below?

Baffled, have spent close on ten hours at this now and nothing. Everything above 768px works as I want and everything below 600px works as I want.

It is just both 768px & 600px that the toggle menu is always expanded, ie, all menu items visible as a list. I do not need to tap “Menu” to open the menu.

See https://www.dhk.ie on small screen to view issue.

Hello Again,

I seem to be 50% there. This is what I have done;

@media only screen and (max-width: 770px) {

.main-navigation li a,
	.main-navigation li {
		display: block;
	}

	.menu-toggle {
		display: block;
	}
}

The issue now is that the “menu” is always open (expanded). I do not have to click on the word “Menu” to open it. All “li” items just appear under each other.

Thank you both for your replies.

@ryansantschi – thank you for such an in depth analysis of the theme. I totally forgot the “mobile first” approach of twenty twelve which you pointed out. I will take your suggestions on board and post back once I have tried them.

Thank you both for your replies, exactly what I needed to know. Much appreciated.

Hi WayneFusco,

To change the colour of the link in its up state;

.main-navigation li a {
color: #000000;
}

Change #000000 to whatever hex colour you want. For example, if you want red change to #FF0000. See https://www.color-hex.com/

To change the colour of the link when you hover;

.main-navigation li a:hover {
color: #000000;
}

Again change #000000 to whatever colour you want as above.

To change the properties of the dropdown in its up state you will need to edit

.main-navigation li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}

To change the properties of the dropdown on hover you will need to edit the code below to whatever colours you want.

.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}

Hope this helps.

Try below and see how you get on;

.main-navigation li a {
color: #000;
}

.main-navigation .current-menu-item > a, .main-navigation .current_page_item > a {
color: ###;
}

wrap header image in a div

<img src=”https://rickycrookmusic.com/wp-content/uploads/2013/06/cropped-Rick-Crook-Music-Header41.png&#8221; class=”header-image” width=”960″ height=”361″ alt=”” align=”center” />

Like so;

<div align=”center”><img src=”https://rickycrookmusic.com/wp-content/uploads/2013/06/cropped-Rick-Crook-Music-Header41.png&#8221; class=”header-image” width=”960″ height=”361″ alt=”” align=”center” />
</div>

Hi Oliver,

Firstly, make sure your using a child theme. Then in the main CSS file of your child theme add the following;

.logo-image {
max-width: 100%;
height: auto;
}

logo-image is the class assigned to your logo image by your theme. You must tell your browser/device to resize the logo to the size of its containing div which is set to a maximum width of 1140px on your theme.

Your main CSS file (for your theme) is located at https://sweetdreamscupcakesycia.com/wp-content/themes/zeetasty/style.css

Hi WPyogi, just found the same post. Thanks a lot for your help.

Thank you for the reply WPyogi and you were right.

NextGEN Gallery by Photocrati is what is causing the problem. As to why I have no idea.

Any suggestions?

Try adding a style to the logo image;

.logoimg {
max-width: 100%;
height: auto;
}

Thank you so much alchymyth, worked perfectly.

Just realised earlier today also about the rem issue on older browsers. Must now go through all css on a few sites to rectify. Thanks for the heads up.

Just figured it out if anyone is interested in the future …

<?php if (is_home()) { ?>
   <image src="<?php bloginfo('stylesheet_directory'); ?>/images/imagename.jpg" />
<?php } elseif (is_page(8)) { ?>
   <image src="<?php bloginfo('stylesheet_directory'); ?>/images/imagename.jpg" />
<?php } elseif (in_category( '5' )) { ?>
   <image src="<?php bloginfo('stylesheet_directory'); ?>/images/imagename.jpg" />
<?php } ?>