Categories Plus sign fix (mobile)

[EdHarrison]

On my theme on mobile categories are a non standard + sign, I prefer the three horizontal lines type, looked hard in the sites folder for that image to change it but no lluck?

[NormanRouxel]

The "+" sign isn't an image. It's styled text. The generated code is (in e.g. Smart Mini Menu):

		<p class="mainNav">Categories<a id="mainNav" href="#menu" onclick="$(this).text($(this).text() == '-' ? '+' : '-');">+</a></p>

So it may be possible to use two icons, plusicon.jpg and minusicon.jpg (keep them in your Site folder) with the following (untested) code:

		<p class="mainNav">
			Categories
			<a id="mainNav" href="#menu" onclick="$('#plusminusicon').attr('src', $('#plusminusicon').attr('src').indexOf('plusicon') == -1 ? 'plusicon.jpg' : 'minusicon.jpg');">
				<img id="plusminusicon" src="plusicon.jpg" />
			</a>
		</p>

[Buzby]

Hi Ed,

Just to let you know your site isn't displaying very well on my iPhone.

[EdHarrison]

Yuk... OK...don't know why, I assumed the logo would be responsive.

[EdHarrison]

So 2014 was pushed as responsive! The main first visible part of any site is the header / logo, they go ahead with 2016 and leave us with a silly looking site - tut

Webmaster tools is a comedy of errors, I would prefer to spend more time selling than talking to support, it seems never ending.

Thank goodness for the kind help on here...

[EdHarrison]

Testing in developer on firefox it seems ok below 360 px and fine again above 600px - how odd

[EdHarrison]

It worked Norman, well the minus one does not but still looks miles better!

[NormanRouxel]

Ed. I made a typo in my post #2. I've corrected it now. Try the updated post #2 code.

[EdHarrison]

Still no minus - could be me, I will check I named the image correctly...

The code refers to minus and plus images but only one src to the plus?

[NormanRouxel]

Hi, Ed. Apologies. Looks like I made a typo in my correction. Try post #2 now.

I'm fairly sure it'll work - I tested it on an SD demo site.

[EdHarrison]

Norman - brilliant, works perfectly, thank you.

[EdHarrison]

Now - it works great but is there a way of "floating it left" as if I make it more than 40px wide it drifts off the right side?

I got rid of the CATEGORIES word to the left but it still wont budge...

thanks

[NormanRouxel]

Unfortunately, I'm not a CSS specialist so I hope someone else who knows will contribute.

You can see it via the link on Ed's signature above.

[John Ennals]

Hi Ed,

This might work. Search for this in the Smart Repsonsive Stylesheet (line 785 on my system):

.miniNav > p > a {
			float:right !important;
			width:1em;
			margin:0 !important;
			font-size:2em;
			text-align:center;
		}

And change the second line to:

float:left !important;

Be prepared to change it back again - I'm no expert!

John

[EdHarrison]

Thank you John, I am now able to tweak it and that is where the awful colour code was that I was looking for to - much appreciated.