So I added my logo to the navigation panel at the top of my site. The theme doesn't support having a logo there... I just added the <img /> code into the header HTML.

The only way to get the image where I wanted it though was to add it to the "top-navigation" section where all the page headings are contained.

I installed a responsive menu plugin and set it so the top navigation disappears and turns into the three bar icon when the page gets to a certain width (for example on a mobile device).

The problem is that since my site logo code is within the top navigation section the logo also disappears.

So basically I'm looking to take the logo code out of the top navigation section so it will remain when the page shrinks.

I have no idea how to code css or how to integrate the HTML with the css so I don't know how to do this.

My site theme is Fashionistas.

Very appreciative of any help.

closed as off-topic by Michael, Jack Johansson, cjbj, Dave Romsey, kraftner Jul 31 '17 at 15:18

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.


I was going to leave this as a comment since questions about CSS are off-topic here, but it wasn't going to fit.

There is a rule in your inline CSS at line 75, which hides the menu of the screens sized less than 750 pixel. This is it:

@media only screen and (max-width: 750px) {
    #top-navigation {
        display: none !important;

Which hides both your logo and the menu. To revert this, you can either add your image outside the #top-navigation, or hide only the menu, not the whole navigation.

For example, add a simple media query and add it to Appearance > Customize > Custom CSS:

@media only screen and (max-width: 750px) {
    #top-navigation {
        display: block!important
    #top-navigation .sf-menu {
        display: none !important;
  • Hi thanks Jack. Yes I think the rule in line 75 was added by the plugin I installed. My problem though is that I don't know how to get my logo in the same location without having its code within "top-navigation". The code that you posted below should hide only the menu and not the logo? – mkm Jul 29 '17 at 1:01
  • Hi! Well, then you better hope the customizer adds your css after plugin's styles, otherwise it can't be overridden since it's using !important. – Jack Johansson Jul 29 '17 at 1:02
  • Ok thanks very much for your help Jack. Also where exactly is the "@media only screen and (max-width: 750px)" code? I don't see it in style.css. Couldn't I just take out the "!important" from that code? – mkm Jul 29 '17 at 1:10
  • 1
    Edit: nevermind... I think I found it in the plugin css code. – mkm Jul 29 '17 at 1:16
  • Glad to see you've found it :) – Jack Johansson Jul 29 '17 at 1:16

This code should remove the logo from the admin screens:

add_action( 'wp_before_admin_bar_render', function() {
global $wp_admin_bar;
}, 7 );

It is placed in the function.php file of the Child Theme (you don't want to put it in the main theme, as your change will be overwritten on the next theme update).

To learn how to create Child Themes, start here: https://codex.wordpress.org/Child_Themes . From your question, though, it appears that your coding expertise is minimal, so you may need to get someone to do this for you.

  • Rick, the OP asked about the logo on his front that he added manually by typing the code into the template, IIAC. – Jack Johansson Jul 29 '17 at 0:47
  • Hi Rick, thanks but I'm not sure that's what I'm looking for. I'm not trying to hide the logo, I'm trying to keep the logo when the page width shrinks. I do have a child theme. And my experience is definitely minimal, but I'm able to at least copy and paste things and make minor changes to css and html. – mkm Jul 29 '17 at 0:52
  • Sorry for the confusion/misinterpretation. Getting late here... – Rick Hellewell Jul 29 '17 at 4:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.