[mayurdParticipant]

Theme: Ethos
Website: http://www.nsshadowcat.com

Hello,

I recently deleted my website’s tagline through my WordPress settings. Yet, opening my website’s homepage still displays a stray ‘-‘. ie. the title of the page(the name displayed in the tab’s name) is ‘NSShadowcat -‘ instead of ‘NSShadowcat’.

I have attached a couple of screenshots to better illustrate the problem. Additionally, I have tried posting this query on WordPress’ forums with no success.

Thank you
-Mayur

[FriechModerator]

Hi Mayur,

Thanks for writing in! You can add this on your child theme’s functions.php file.

/*Remove title separator*/
  function x_wp_title( $title ) {

    if ( is_front_page() ) {
      return get_bloginfo( 'name' ) . '' . get_bloginfo( 'description' );
    } elseif ( is_feed() ) {
      return ' | RSS Feed';
    } else {
      return trim( $title ) . '' . get_bloginfo( 'name' ); 
    }

  }
  add_filter( 'wp_title', 'x_wp_title' );

Hope it helps, Cheers!

[mayurdParticipant]

I pasted this code in my child theme’s functions.php file as you asked but the title still appears to be the same. Could you tell me what went wrong?

Thank you.

[RupokMember]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[mayurdParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

#1 I see you have cache plugin activated, please clear cache and check again.

#2 Please add the following code in Customize -> Custom -> CSS :

a.x-btn-navbar i {
    color: #fff;
    background-color: gray;
    padding: 10px;
    border-radius: 5px;
}

Hope it helps.

[mayurdParticipant]

Hey again,

#1 I have completely disabled caching now but the issue persists
#2 Thank you, this did the trick. Is there a way to change this hamburger icon to a downward pointing icon?

Thanks a ton for your prompt responses.
-Mayur

[Rue NelModerator]

Hello Mayur,

1] Please update the given code and use this instead:

 function x_wp_title( $title ) {

    if ( is_front_page() ) {
      return get_bloginfo( 'name' ) . ' ' . get_bloginfo( 'description' );
    } elseif ( is_feed() ) {
      return ' | RSS Feed';
    } else {
      return trim( $title ) . '' . get_bloginfo( 'name' ); 
    }

  }
  add_filter( 'wp_title', 'x_wp_title', 100 );

2] To change the icon to a downward and upward pointing icon when the mobile menu is being collapse, please add the following css code in your child theme’s style.css.

.x-btn-navbar.collapsed .x-icon-bars:before {
  content:"\f0d7";  
}

.x-btn-navbar .x-icon-bars:before {
  content:"\f0d8";  
}

Adding this code in the customizer will not work because the customizer will automatically strip off backslash and forward slash for security purposes.

We would loved to know if this has work for you. Thank you.

[mayurdParticipant]

Hello again,

Both issues were finally fixed, I cannot possibly be thanking you anymore.

Additionally, is there any way you could help me with entirely eliminating the drop down menu that gets created for my list when my website is viewed on mobile. Instead, the list I selected should be displayed as it is on the desktop except with a smaller font. I have illustrated with appropriately tagged pictures.

Edit: please ignore the duplicates

[Rue NelModerator]

Hello There,

Thanks for the updates. We are just glad the it has worked out for you to fix the issue. To remove the mobile menu and use the desktop menu instead, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .x-nav-wrap.desktop {
    display: block;
  }

  .masthead-stacked .x-btn-navbar {
    display: none;
  }

  .x-navbar .x-container.max.width {
    max-width: 100%;
    width: 100%;
  }

  .x-navbar .desktop .x-nav>li {
    float: none;
    display: table-cell;
  }

  .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px;
    padding-right: 5px;
  }
  
  .x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: 0;
    font-size: 16px;

  }  
  .x-navbar .desktop .x-nav > li > a > span {
      margin: 0 auto;
  }
}

You should insert this code at the end of your other custom css to make it work. Please let us know how it goes.

Thanks.

[mayurdParticipant]

Hey Themeco folks,

This code helped but only partially. My list no appears fine on mobile devices but the list doesn’t shrink or adapt to smaller screen sizes. As an example, I have attached a screenshot of my website as displayed on an iPhone 5. I’d want the text to become smaller so that the list can fit properly within the screen’s width.

Thank you once again
Mayur

[ChristopherModerator]

Hi there,

Please add following code :

@media (max-width:530px){
p {
    font-size: 12px;
}
h2.entry-title {
    font-size: 100%;
}
.x-navbar .desktop .x-nav > li > a {
    font-size: 15px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px;
    padding-right: 10px;
}
}

Hope that helps.

[mayurdParticipant]

That didn’t do the trick. The list is still stuck as is- it does not scale according to the size and doesn’t display adequately on narrow displays.
To be clear, I have added(concatenated) everything to the existing CSS, without deleting any previous material. Do have a look at my CSS for clarification.

-Mayur.

[Rue NelModerator]

Hello Mayur,

The css in the child theme gets overridden by the customizer settings because it is loaded after the child theme. To make your custom css in the child theme effective enough, you need to add a parent selector. Please update your code and use this instead:

@media (max-width:530px){
  .x-child-theme-active p {
    font-size: 12px;
  }
  
  .x-child-theme-active h2.entry-title {
    font-size: 100%;
  }

  .x-child-theme-active .x-navbar .desktop .x-nav > li > a {
    font-size: 15px;
  }

  .x-child-theme-active .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 10px;
    padding-right: 10px;
  }
}

If still doesn’t work, you may add !important at the end of you style like this: font-size: 15px !important;

Hope this helps.

[mayurdParticipant]

This did the trick. I made a few tweaks though and everything works great now.

Could you explain what @media (max-width:530px) means and what would be the difference if I changed the 530px value? I tried changing it and could see no visible difference.

Another issue I am facing is that these aforementioned links have a weird click-able area around it which results in the underline appearing above the word, not bellow.It also causes a line of white space between the list item and my logo. I have attached a screenshot for illustration purposes and the erroneous, unwanted area is highlighted in blue.

Thank you once more for your excellent continued support.

-Mayur

[Author]

Posts