Changing mobile Navigation to Hamburger navigation icon

Support Area Forums Foxy Changing mobile Navigation to Hamburger navigation icon

This topic contains 5 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://portfolio8.webfruit.nu
  • Author
    Posts
  • #34667

    Wim Kuijpers
    Participant

    Dear Bill,

    Your theme Foxy is a great theme and we are busy creating a setup for our new website. All works fine and what we have created till now looks very nice (we think 😉 )

    The only thing we like to change is to replace the text Navigation to the so called “Hamburger menu icon” used to display the menu on mobile devices. Is there a way do this?

    Bill, great to hear from you,

    Kind regards,

    Wim

    #34671

    Bill Robbins
    Keymaster

    Good Morning Wim,

    Thank you for your business again. I do appreciate it. You can add in a hamburger icon to your mobile, navigation menu. Here’s how to do that:

    1. Go to the Appearance section in your WordPress dashboard and choose Edit.
    2. From the list of files on your right, choose style.css
    3. Scroll down to the very bottom and add this:
      
      
      #mobile-menu {
      	position: relative;
      }
      
      #mobile-menu:before {
      	font-family: 'Icons';
      	speak: none;
      	font-style: normal;
      	font-weight: normal;
      	font-variant: normal;
      	text-transform: none;
      	line-height: 1;
      	-webkit-font-smoothing: antialiased;
      	content: '\e059';
      	position: absolute;
      	z-index: 1;
      	font-size: 30px;
      	top: 11px;
      	left: 9px;
      	color: #fff;
      }
      
      select.tinynav {
      	padding-left: 50px;
      	padding-right: 50px;
      	padding-top: 15px;
      	padding-bottom: 15px;
      }
      
      
    4. Save your changes.

    That should add in a hamburger icon just to the left of the mobile menu text. If you have any questions, just let me know.

    Thanks again,
    Bill

    #34672

    Wim Kuijpers
    Participant

    Hello Bill,

    Many thanks for your quick reply and great support. Bill I entered above text in the Style.css and saved it. It works perfect in IE and Firefox but it does not seem to work in Chrome.

    Bill, we tested it by downsizing the browser screens to a mobile size on our Windows pc and we did not test it on an actual smartphone with Chrome installed. So it might work on a smartphone with Chrome installed too but we do not have one available to test it.

    Bill could you have a look and advise? If for some reason it is not working in Chrome and you have a solution then we are happy to hear it. If there is no solution then it will not be an issue. We are already happy that it is working on most of the browsers.

    Bill, thanks again and kind regards from the Netherlands,

    Wim

    #34673

    Bill Robbins
    Keymaster

    Hi Wim,

    Glad it’s working most places so far. Let’s do this for Chrome. Clear out your browser’s cache. That will cause Chrome to reload the stylesheet that has the changes in it. Most likely it’s using a copy of it before it was edited.

    I took a quick look in Chrome on my Mac and the icon did appear there, so hopefully that’s all that it is. I’ve attached a screenshot of what I’m seeing now.

    If you still have any trouble let me know.

    Thanks again,
    Bill

    #34675

    Wim Kuijpers
    Participant

    Hello Bill,

    Thanks, indeed we had to clear Chrome’s cache to make it visible. Bill thx again for your great support.

    Foxy theme rules! We love it!

    Kind regards,

    Wim

    #34676

    Bill Robbins
    Keymaster

    I’m so glad to hear it. If you need anything else, just let me know 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Changing mobile Navigation to Hamburger navigation icon’ is closed to new replies.