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

talksoverlatte · Member · Jan 8, 2015 at 4:35 pm

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)

nizamilputra · Member · Jan 8, 2015 at 9:19 pm
Copy link
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.
talksoverlatte · Member · Jan 8, 2015 at 9:48 pm
Copy link
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
nizamilputra · Member · Jan 8, 2015 at 10:01 pm
Copy link
How about try this css;
```
button, button:focus{
  outline: none;
}
```
talksoverlatte · Member · Jan 9, 2015 at 12:41 am
Copy link
That worked perfectly! Thank you so much!!!
talksoverlatte · Member · Jan 9, 2015 at 2:52 am
Copy link
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!

nizamilputra · Member · Jan 9, 2015 at 3:07 am

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;
  }
}

talksoverlatte · Member · Jan 9, 2015 at 8:25 pm
Copy link
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!
thesacredpath · Member · Jan 9, 2015 at 8:32 pm
Copy link
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;
	}
}
```
talksoverlatte · Member · Jan 9, 2015 at 8:57 pm
Copy link
Yes!! That works perfectly! You and everyone else who has helped me are amazing. Thank you so much!!!!
talksoverlatte · Member · Jan 9, 2015 at 9:02 pm
Copy link
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!
talksoverlatte · Member · Jan 9, 2015 at 9:04 pm
Copy link
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.
nizamilputra · Member · Jan 9, 2015 at 10:36 pm
Copy link
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;
}
```
thesacredpath · Member · Jan 10, 2015 at 6:38 pm
Copy link
@talksoverlatte and @nizamilputra you are both welcome.
talksoverlatte · Member · Jan 11, 2015 at 5:30 pm
Copy link
@nizamilputra thank you!! that worked like magic.
thesacredpath · Member · Jan 19, 2015 at 3:30 pm
Copy link
You are welcome.

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

WordPress.com forums

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