Results 1 to 4 of 4

Thread: How to add the word 'Menu' to the left of the hamburger

  1. #1
    Junior Member
    Join Date
    Feb 2016
    Posts
    2

    How to add the word 'Menu' to the left of the hamburger

    I'm totally stuck trying to add the word MENU to the hamburger and am hoping someone is able to point me in the right direction

    You can see the test page at http://horseandriderphysiotherapy.co...menu-test.html

    CSS currently reads -

    #mainNav {
    position: fixed;
    right: -200px;
    width: 200px;
    height: 100%;
    top: 0;
    z-index: 10;
    text-align: left;
    }
    #menuToggle {
    position: absolute;
    left: -47px;
    z-index: 999;
    background: rgba(0, 0, 0, 0.30);
    top: 13px;
    cursor: pointer;
    }
    #menuToggle .fa {
    font-size: 18px;
    margin: 7px 10px;
    color: #fff;
    }
    #menuToggle:hover .fa {
    color: #888;
    }
    .menuLinks {
    position: absolute;
    top: 0;
    right: 0px;
    background: rgba(0, 0, 0, 0.9);
    width: 200px;
    height: 100%;
    z-index: 999;
    padding: 10px 0 0 0
    }
    .menuLinks li {
    list-style: none;
    }
    .menuLinks li a {
    margin-left: 20px;
    color: gray;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 38px;
    text-transform: uppercase;
    }
    .menuLinks li a:hover {
    color: #888;


    Any advice gratefully accepted

  2. #2
    Member
    Join Date
    Nov 2015
    Location
    Cincinnati
    Posts
    68
    I don't really understand what you are saying. A look at your site (by the way I'm a horse owner myself), I just not sure what you are asking
    Rcik

  3. #3
    Junior Member
    Join Date
    Feb 2016
    Posts
    2
    Hi Rick

    Nice to 'meet' you

    I want to add the word MENU, to sit to the left of the hamburger icon as there are still a lot of people who don't realise they need to click the hamburger icon to see the menu.
    Or it could sit above it.

    I'm open to any ideas on how to make this clear for those who aren't familiar with it.

  4. #4
    Member
    Join Date
    Nov 2015
    Location
    Cincinnati
    Posts
    68
    OK, now I see what your are asking.

    try this: <span class="sr-only">Toggle navigation</span>Menu&nbsp;<i class="fa fa-bars"></i> (FYI the &nbsp; [non breaking space] will create a space between word menu and the icon)

    I got to ask, why are you using the collapsed menu rather, which is used for mobile devices. You could use a full horizontal menu that collapses down when the screen width is mobile only.

    Rick
    Last edited by Rick; 02-18-2016 at 11:57 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •