Issue with main menu in Newspaper version 4.6.1

Hi there,

We had the below conversation with Bogdan B at themeforest.net:

rboye PURCHASED
1 day ago Flag
Hi guys,

I have rather many categories added in my “main” menu. I have chosen these items to be in white color with a blue background. The issue is that when I reduce the size of the web browser screen (on my computer), I notice that the menu items jump down one row. However, the row that it jumps down to is in white (since the background of my website is white) so you can’t even see the last items of the menu anymore, they just get hidden based on the color. It just results in an extra white row. I have to reduce the screen size significantly more for it to start using the “mobile menu” instead.

This creates problems for everyone using those screen sizes in the middle, between full size and “mobile size”, since they can’t see the items of the menu. How do I fix this? One idea, which many themes do, is that the background color of the menu also gets one more row when the menu items get one more row (which in this case would mean that the blue color also gets one more row when the white menu items get it). Is this possible, or do you have any other fix for this issue?

Thank you in advance.

tagDiv
tagDiv AUTHOR
about 5 hours ago Flag
Hello,

I’m not sure how you changed the header color. If you change it from the theme panel as recommended, and not with custom css, then it will show properly even if your content falls on 2 rows: http://screencast.com/t/vY1ELC9a Here is the back-end setting required for this: http://screencast.com/t/jjDCCU4ab Please use the theme panel settings to change theme colors. If you have any further questions, please open a nw topic on our official support forum at https://forum.tagdiv.com/forum/newspaper/

Thank you! Bogdan B

rboye
rboye PURCHASED
about 4 hours ago Flag
Thanks Bogdan.

I did change the color in the theme panel settings, but I am still getting this issue.

Could it be that I am using version Version: 4.6.1? I would really not like to update, because I did try to update a while ago but so many things had changed and I spent a whole day trying to get things back to the same look and function as I had with the older version, and in the end I down-graded again to the older version since I didn’t get things the way I wanted them to be. Therefore, can I solve this issue with 4.6.1? From what I can understand, it should be just a small code-change for the menu-strip to expand in accordance with the menu.

Thank you.

tagDiv
tagDiv AUTHOR
about 1 hour ago Flag
Hello,

Please open a new topic on our support forum and provide a link to your site so we can take a look at it and maybe provide the proper code for the menu. We suggest updating the theme though eventually as more and more things will start to break as you update everything around the theme, but not the theme. Newspaper version 4 is almost 2 years old. We cannot assure it’s compatibility with the latest versions of wordpress or plugins. Eventually you will have to take this step and update the theme.

Thank you! Bogdan B

Would you be able to help me and provide the proper code for the menu? I would very much appreciate it. The website is homereviewed.com.

Thank you.

Hi Catalin,

No, it’s not working properly even with this amount of menu items. If you reduce the size of your browser window, you will see the issue. The menu item furthest to the right “jumps down” one row when you reduce the browser window, and becomes invisible since it is white. Here is a screenshot of it:

https://s16.postimg.org/6yeropuhx/Screenshot.png

You can see that I am hovering my mouse over an invisible menu item in the screenshot.

Thank you.

HI

You can try this css as a temporary fix, it will add a background when the menu goes on two columns:
http://screencast.com/t/Km1ZxcScAf

@media(min-width: 768px) and (max-width: 1210px){
.sf-menu {
background-color: #4db2ec !important
}
}

Thanks!

Thanks Andrei!

Though is it possible to get it to look more like this? https://s17.postimg.org/p5u8kx94v/2212.png

So that the extra menu colors go all the way to the sides, and the shadow is deleted?

The new version does this really nicely. Maybe we can somehow use the code from your new version of the theme: http://screencast.com/t/vY1ELC9a

Thank you.

Thank you Bogdan!

This is exactly what I wanted.

It works perfectly in Firefox and Chrome, but in Safari the menu is put on top of other things, please see this screenshot: https://s10.postimg.org/ykt8tuend/Ska_rmavbild_2016_10_19_kl_08_56_49.png

Is there anything that can be done to fix that too?

Thanks.

Hi Bogdan,

I’m really not that good with CSS. Is it this code that I should use?

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {

}
}}

What should I do with it to apply to my website?

Thank you.

Thank you very much! It works perfectly.

I’ll be sure to give the theme a 5-star feedback at Themeforest.

Have a nice day.