[Pro] creating custom breakpoint icons

Randi · December 31, 2015, 12:43am

Hi.

I want to use a word as a breakpoint icon instead of the default hamburgers, so I created the word at the size I need and saved it as a png. I then selected it as the “open icon” in the CSS Responsive menu action, but when I test the site in the browser, it automatically reduces it to the width of the default hamburger icon and becomes unreadable, regardless of its original size. How can I prevent it from reducing?

Thank you.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · December 31, 2015, 1:03am

You will need to add some CSS to your page/site

.fwNav1-toggle-label, .fwNav1-toggle-close {
	width: 45px;
	height: 45px;
	}

Is what works for me - obviously you will need to play with the width and height to suit your needs.

Dont forget to wrap this in some style Tags and add it to your Page/Master via Page> Html Markup in the before section.

It should then look like this:

<style type="text/css">
.fwNav1-toggle-label, .fwNav1-toggle-close {
	width: yourwidthpx;
	height: yourheightpx;
	}
</style>

If that doesn’t work for you then post a link to an online example and we can work out what went wrong.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Randi · December 31, 2015, 2:31am

Thanks! I’ll give it a go and let you know how it works out.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Randi · December 31, 2015, 2:19pm

Hi,

It’s working to some degree, but not 100%. I tried a few different things (I love troubleshooting), but it’s still not working the way I need it to. I’ll post a link to a sample page.

Thanks for your help, I really appreciate it.
Randi

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · December 31, 2015, 5:27pm

I’ll post a link to a sample page.

That is the only way we can properly diagnose any issues. When you post a link tell us what you are hoping to see/how you want it to work.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Randi · December 31, 2015, 5:59pm

Yes, I will certainly explain in more detail when I post the link. I wanted to create a clean document with just that page and set up a test URL for it., but got hit with an “emergency” project that has to be completed today, so had to switch gears. Will jump back onto it asap.
Happy New Year and thanks again.
~R

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Randi · January 2, 2016, 11:13pm

Happy New Year! I got a little further since last I wrote, but am not completely there yet. Below is the link. There are 2 live page links: “Special Events” (the sample page it’s applied to) and “Example” on which there is a graphic of my goal.

The “Main Menu” icon is working, but it won’t center vertically for some reason. The “Portfolio” menu icon reduces to the default width.

It also seems that the close icon picks up the width written in the HTML page mark-up (with the height resizing proportionally). Is there a way to assign a separate size to the close icon?

http://icontest.rsidentitydesign.com/

Thank you!
Randi

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · January 3, 2016, 1:49am

it won’t center vertically for some reason

Try adjusting the height of #item13 at the relevant BP - about 26px should do it.

If you make your Close icon the same size as the Open one you shouldn’t need to adjust them individually.

Other than that create a new separate style .fwNav1-toggle-close

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Randi · January 8, 2016, 11:06am

Thank you for all your help!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

gavtro · August 1, 2016, 6:38pm

On 31 Dec 2015, 1:03 am, DeltaDave wrote:

You will need to add some CSS to your page/site
.fwNav1-toggle-label, .fwNav1-toggle-close {
	width: 45px;
	height: 45px;
	}
Is what works for me - obviously you will need to play with the width and height to suit your needs.

Dont forget to wrap this in some style Tags and add it to your Page/Master via Page> Html Markup in the before section.

It should then look like this:
.fwNav1-toggle-label, .fwNav1-toggle-close {
	width: yourwidthpx;
	height: yourheightpx;
	}
If that doesn’t work for you then post a link to an online example and we can work out what went wrong.

David

Having the same issue. Could someone explain how to implement David’s solution in very simple terms - thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Randi · August 1, 2016, 9:26pm

Go to: Page, HTML Mark-up and place the code below in the Before section . Best to apply it to your master page. Replace with height and width values with your own. Mine happen to be 134 x 22px.

Note that I created my Main Menu and and “Close” art in Illustrator and exported them as PNGs. So the dimensions must match or be proportionate to the values you key in. You can see it working on my site: www.rsidentitydesign.com

.fwNav1-toggle-label, .fwNav1-toggle-close { width: 134px; height: 22px; }

Hope this helps. Maybe someone else can explain more simply.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

gavtro · August 2, 2016, 8:04pm

Thanks. All seems straightforward enough, but still seems to be displaying it at the same vanishingly-small size! Is your solution exactly the same as David’s?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Randi · August 2, 2016, 8:36pm

Hi. Yes, same as David’s. I wrapped it in style tags as he suggested.

I see that my above code example reverted to one line, as I forgot to create that green box which keeps it intact.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · August 2, 2016, 8:39pm

Is your solution exactly the same as David’s?

Post a link Gavtro and we can have a look.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

gavtro · August 3, 2016, 10:54pm

Thanks. It’s here:

http://www.test2.thebrandmill.net

(It’s the home page only that’s got the larger hamburger at the moment)

(Excuse the site’s ragged responsiveness - it’s nowhere near finished!)

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · August 4, 2016, 1:02am

It looks like your text/css is wrapped in curly quotes ” not straight ones "

<style type=”text/css”>.fwNav1-toggle-label, .fwNav1-toggle-close {
  width: 135px;
  height: 29px;
  }</style>

Change that and try it again.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

gavtro · August 4, 2016, 6:15pm

Doh, yes!

That did the trick. Thanks, David.

freewaytalk mailing list
email@hidden
Update your subscriptions at: