Minnow Theme: How to replace the menu button with word "destination"?

  • Unknown's avatar
    talksoverlatte · Member ·

    Hi!
    Two things:
    1) I’m looking to replace the menu button (that slides out a sidebar) with the word “Destinations” or anything else – maybe even an image (if i want to use a special font for “Destination”)

    So far: 

    .menu-toggle:hover, .menu-toggle:hover:before, .menu-toggle:hover:after, .menu-toggle:active, .menu-toggle:active:before, .menu-toggle:active:after, .menu-toggle:focus, .menu-toggle:focus:before, .menu-toggle:focus:after, .sidebar-open .menu-toggle, .sidebar-open .menu-toggle:before, .sidebar-open .menu-toggle:after {
    border-bottom-color: #ffff00;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-top-color: #ffff00;
    transition-delay: 0s;
    transition-duration: 0s;
    transition-property: all;
    transition-timing-function: ease-in-out;
	  content: 'Destination';
}

    Based on someone else’s question asking about how to change the color; but as you can see, this doesn’t really work :(

    2) I’d like to change the font style of the sidebar menu content – right now my cities are italicized, etc. I want to change that!

    Can anyone help? Thank you so much in advance!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    nizamilputra · Member ·

    Hi there, let me try to help you.

    1) I’m looking to replace the menu button (that slides out a sidebar) with the word “Destinations” or anything else – maybe even an image (if i want to use a special font for “Destination”)

    .menu-toggle, .menu-toggle:before, .menu-toggle:after{
  border: none;
}
.menu-toggle:after {
  background:       url(http://talksoverlattes.files.wordpress.com/2014/12/004.png?w=300) no-repeat; // change with image you want
  background-size: 100px; // define your backgound size
  width: 100px; // define your backgound size
  height: 25px; // define your backgound size
  top: 0;
  left: auto;
  right: 0;
}

    Please define your background size in background-size, width, height property.

    2) I’d like to change the font style of the sidebar menu content – right now my cities are italicized, etc. I want to change that!

    .main-navigation{
  font-style: normal;
}

    I hope it will helps you.

  • Unknown's avatar
    talksoverlatte · Member ·

    Hi nizamilputra,

    That worked amazingly – thank you SO MUCH!!!

    I have one more question: now that I have my customized button, when I click on it for the slide-out menu, it remains highlighted in blue – http://talksoverlatte.com. Is there a way to get rid of the blue highlight? I have to click somewhere random on the page to get rid of it.

    Thanks in advance

  • Unknown's avatar
    nizamilputra · Member ·

    How about try this css;

    button, button:focus{
  outline: none;
}
  • Unknown's avatar
    talksoverlatte · Member ·

    That worked perfectly! Thank you so much!!!

  • Unknown's avatar
    talksoverlatte · Member ·

    Hi! So far, it’s been working great. I noticed, however, on my mobile phone, the DESTINATIONS overlaps with my header image/logo. Is there any way to avoid this?

    Thank you!

  • Unknown's avatar
    nizamilputra · Member ·

    Lets try with this;

    @media screen and (max-width: 40em){
  .menu-toggle, .menu-toggle:before, .menu-toggle:after {
    border: none;
    background: url('https://talksoverlattes.files.wordpress.com/2015/01/destinations.jpg') no-repeat;
    background-size: 150px;
    width: 150px;
    height: 42px;
    top: 0;
    left: auto;
    right: 0;
  }
  .menu-toggle{
    background: none;
    margin: 0;
    top: 90px;
    padding:  0;
  }
  .social-links{
      margin-top: 50px;
  }
}
  • Unknown's avatar
    talksoverlatte · Member ·

    So I added that, and it’s almost there… if you check it out on mobile app, the DESTINATIONS is still slightly overriding the top of “Latte”

    Thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, the overlap begins around 500px, so let’s use a media query at max-width 500px and add a bit of top margin to the site-branding. 

    @media screen and (max-width: 500px) {
	.site-branding {
		margin-top: 30px;
	}
}
  • Unknown's avatar
    talksoverlatte · Member ·

    Yes!! That works perfectly! You and everyone else who has helped me are amazing. Thank you so much!!!!

  • Unknown's avatar
    talksoverlatte · Member ·

    I’m really sorry – I have one more question…
    On normal computer screen:

    Is there any way to reduce the height of the gray header space that contains my image + social link menu? I would also like DESTINATIONS to be a bit higher up – theres some awkward gray space right above DESTINATIONS.

    Thank you!

  • Unknown's avatar
    talksoverlatte · Member ·

    Also, in the sidebar menu, instead of “menu”, I’d like for it to say “Travel Guides” Or “Cities” or something like that. Is it possible to change that in the slide-out sidebar?

    Thank you in advance! I apologize for all these additional questions.. I’m learning CSS as I go and am learning so much from you all.

  • Unknown's avatar
    nizamilputra · Member ·

    Thank you Richard for helping us out :). The staff here are awesome!

    Is there any way to reduce the height of the gray header space that contains my image + social link menu? I would also like DESTINATIONS to be a bit higher up – theres some awkward gray space right above DESTINATIONS.

    @media screen and (min-width: 35em){
    .site-header {
        padding-top: 2.5em;
    }
    .menu-toggle, .menu-toggle:before, .menu-toggle:after{
        margin: 0;
    }
}

    I wonder css media query for mobile screen that apply to “Destination” menu didn’t work anymore. Maybe because the code position, so it just apply css without media query. http://cl.ly/image/1c1h1h1W3j3z.
    Please check, but you can leave it if it’s ok for you :)

    Also, in the sidebar menu, instead of “menu”, I’d like for it to say “Travel Guides” Or “Cities” or something like that. Is it possible to change that in the slide-out sidebar?

    .slide-menu .widget-title{
    font-size: 0;
}
.slide-menu .widget-title:after{
    content: "Cities";
    font-size: 20px;
    display: block;
    margin-bottom: 10px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    @talksoverlatte and @nizamilputra you are both welcome.

  • Unknown's avatar
    talksoverlatte · Member ·

    @nizamilputra thank you!! that worked like magic.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Minnow Theme: How to replace the menu button with word "destination"?’ is closed to new replies.