Menu problem after update to 8.x-1.8

You must have something going on your site. The menu will become vertical only if it is added to vertical region. Go to yoursite-dot-com/admin/structure/block and make sure the main menu is in the Primary Menu region not in Primary Menu Vertical region. Make sure you clear all caches. In the new update the two IDs for the main menu were removed for W3 Validator. If you used the two IDs for some custom code then you should update the code. Or you have a custom template for the main menu in the sub theme menu--main.html.twig that will override the main menu.

.

This issue needs to be reopened.

I just upgraded from "Drupal8 W3CSS Theme 8.x-1.x-dev (2017-Aug-05)" to "8.x-1.8 (2017-Aug-24)" today as well. The same thing happened to me. I use the Subtheme along with a modified styles.css file in the subtheme's css folder (to set custom colors for the various regions and form buttons, plus have special form fields to handle Honeypot), and I always keep a backup of it in another area of my hosted site. When I installed the new theme file I then replaced the styles.css file, then cleared all caches. No other modifications were made. Several problems were immediately noticed:

1) What had been a horizontal list of main levels in the main menu with drop-downs of the next level now shows all main levels and sub-levels in a vertical list at the top of the page. Main Navigation is confirmed in the Primary Menu area, and it is configured with Initial Visibility Level of 1 and Number of Levels to Display of 3.

2) Each of the main areas on a page - such as Content, Right Sidebar, etc - now have a shaded border around those areas. There were no borders before. I also checked and all of the settings for the Subtheme are unchanged from what they were before the upgrade.

3) I have a defined view for showing teasers of my blog articles, and those articles have a separate image field which is used in this view. Here are the defined fields for that view:

Fields

Content: Title
Content: Published date
Content: Blog image
Content: Body
Content: Path [hidden]
Global: Custom text

These are the settings for Blog image:

Formatter: Image
Image style: Medium (220 x 220)

Now while the original image for each blog post is 325 x 475 and the teaser view had it that size or smaller, it now shows in the teaser view as 900 x 1300, filling the width of the entire content area!

Luckily I completely backed up my site before installing the new theme. So I will erase things and install the back-up from an hour ago.

@Marrer,
1- About the main menu, any problem with the main menu it is caused by the sub theme. If you install the Drupal8 W3CSS Theme and set it as a default everything should be fine. You need to adjust the custom code in the sub theme. Make sure nothing is overriding the main menu and make sure you don't have any custom template for any menus in your sub theme.
2- About the shadow for the main content, the shadow was added. You can disable the shadow of the main content by adding this code to your sub theme.

.main-region > .w3-card-2 {box-shadow: none!important;}

3- About the image size. I have the theme installed on a demo site with a view teaser. The images are fine. But you can fix the image size by adding this code to your sub theme. a.d8-has-image > img.w3-image {width: auto;}

Here is a list for the changes in 8.x-1.8 https://www.drupal.org/project/d8w3css/releases

1- About the main menu, any problem with the main menu it is caused by the sub theme. If you install the Drupal8 W3CSS Theme and set it as a default everything should be fine. You need to adjust the custom code in the sub theme. Make sure nothing is overriding the main menu and make sure you don't have any custom template for any menus in your sub theme.

You've lost me as to why anything in the subtheme should affect the menu. I thought the whole idea of the subtheme was to easily customize minor settings like colors, and to have them in the style.css file.

Here are the only things I am defining in my style.css file:

1) color names (to be put in the Advanced Site Colors section). They are defined like this:

.mysite-white {
  color: #000 !important;
  background-color: #ffffff !important;
}

2) color for form buttons:

.w3-button {
  background-color: #6699cc !important;
  color: #fff !important;
}

.w3-button:hover {
  background-color: #79bff8 !important;
  color: #000 !important;
}

3) I have to define a setting for blocks with 3 equal-size columns to fit in a specific area:

.equal-width-3-col td {
    width: 453px; !important
}

4) I have a special copywrite block area that needs the text a certain font and size:

.copyright-3-col td {
    width: 453px !important;
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 14px !important;
}

5) For Honeypot I use the field name "Fax". Because a page may have more than one form on it, I have to define a few of these:

form #edit-fax {
  display: none!important;
} 

form #edit-fax--2 {
  display: none!important;
} 

6) Finally, allow images with links to zoom when the mouse hovers over them:

a:hover > img {
    animation: animateimg 5s;

Isn't the idea of the subtheme to allow easy customization like the above? Since those are the only changes I am making and putting in the styles.css file, how can that in the subtheme possibly affect the operation of the menu?

@Marrer,
The sub theme is for adding some customization to any theme. You don't have any code will override the main menu or any menus. You should not have any problem.
Check the following on your site:
1- Your main menu is placed in Primary Menu's region. Any menu with any name you create and place it in this region it will be your main menu.
2- When you updated the theme, you did not merge the old files and the new files. Make sure you don't have d8w3css/templates/navigation/menu--main.html.twig in your updated theme.
3- Make sure you cleared caches. Drupal Caches.
4- Make sure you cleared all caches on your browser. If not visit the site in Private Browser.

2- When you updated the theme your did not merge the old files and the new files. Make sure you don't have d8w3css/templates/navigation/menu--main.html.twig in your updated theme.

I'm confused with what you said. Isn't the idea of updating themes (or even modules) that everything is handled smoothly? Otherwise that is almost like saying that if a theme is to be updated, you should completely delete the theme and then treat the latest version like a brand new install. I've never had any problems with installing previous updates you made to the theme.

Please explain what you feel should be the proper steps to follow to install new versions of your theme.

BTW, all of the previous settings I had for the theme were still there, so I got the impression that the new files were accepted accordingly.

@Marrer,
Here is the how to update a theme in drupal. https://www.drupal.org/docs/user_guide/en/security-update-theme.html
After you update the theme check everything and make sure it is correct.

Here is the how to update a theme in drupal. https://www.drupal.org/docs/user_guide/en/security-update-theme.html
After you update the theme check everything and make sure it is correct.

Those are exactly the steps I followed (as I did during the previous attempt). Same problem occurs with the display of the menu.

In post #9 you said:

2- When you updated the theme, you did not merge the old files and the new files. Make sure you don't have d8w3css/templates/navigation/menu--main.html.twig in your updated theme.

I found that file where you said it was. Once I renamed it and cleared cache, the menu operated correctly. I'll go ahead and delete it now.

The navigation folder currently has 13 files in it. All but one had a timestamp of when I did the update a few minutes ago. That one with the different timestamp was menu--main.html.twig and its timestamp was Aug 5, 2017 9:59 PM — corresponding to when I installed "Drupal8 W3CSS Theme 8.x-1.x-dev (2017-Aug-05)".

I have not yet learned how TWIG or the Update process works, but is there a way that when updates are built, that obsolete and unnecessary files can be deleted (or at least renamed) if found to exist on the customer's site? Since you identified that this is an old file that interferes with the correct operation of the menu with this new theme version, somehow this cleanup needs to be automatically handled for the user.

@flashwebcenter
re: Post #7

Changes you suggested for removing shadows and maintaining image size worked. Thanks!

@flashwebcenter

2- About the shadow for the main content, the shadow was added. You can disable the shadow of the main content by adding this code to your sub theme.

.main-region > .w3-card-2 {box-shadow: none!important;}

Was any other additional spacing added to the main content? Or did something change with how the Main Container is handled?

I have the background color set to white for W3 Content, and it used to butt right up to the Page Title and the Footer Container areas and their colors. Now there is a small area of color between Content and Title and Content and Footer. It seems to match the color I set for Main Container, although that same color is used for Page Wrapper, both Sidebar Backgrounds, Bottom Container and Footer Container. So not sure which one or ones might be now causing this.