Solved Helix Framework

Helix Ultimate Menu Display

Asked by Anna del C. Dye 4 years ago Last activity 4 years ago

I upgraded my development site to 2.0.9 and now am having weird menu problems.
On the production page with prior versions the menu displays with nine menu categories with special formatting and no right side indicator of the subitems: https://www.annadelc.com
On the development site with the newest version the right side indicator for sub items overrides the special formatting and the third menu category is mostly hidden: https://www.annadelc.com/dev/

My custom formatting is done in the custom.css file in /home/u288-4uggmjepiuzo/www/annadelc.com/public_html/dev/templates/shaper_helixultimate/css

What needs to be done to restore the desired display of the menus, yet use the current version?

Accepted answer

Marked as the solution

Toufiq Senior Staff

4 years ago

Keep a backup of your custom.css file and replace this css code.

#sp-header, #sp-header .logo { height: 40px; }
.sp-megamenu-parent > li > a, #offcanvas-toggler { line-height: 40px; }

body {
            line-height: 24px;
            -webkit-transition: all 400ms ease;
            transition: all 400ms ease;
            background-color: #234f80;
        }


#sp-footer { background-color:#025670
    }

#sp-bottom { background-color:#025670
    }

.column { float: left; width: 9.0%; padding: 0px; } 
.columns { float: left; width: 7.0%; padding: 0px; } 
.columnsa { float: left; width: 2.0%; padding: 0px; }
.columnsb { float: left; width: 5.0%; padding: 0px; }
.columny { float: left; width: 25.0%; padding: 0px; }
.columnx { float: left; width: 75.0%; padding: -15px; }
/* Clear floats after image containers */ .row::after { content: ""; clear: both; display: table; }
/*Good set*/
.sp-megamenu-parent {
    float: left;
}

.sp-megamenu-parent > li > a:before {
  content: url(/images/WebArt/tab_gold_lc.gif);
  height: 31px;
  margin: 0px;
  padding: 0px;
  padding-top: 0px;
}
.sp-megamenu-parent > li > a:after {
    content: url(/images/WebArt/tab_gold_rc.gif);
    height: 31px;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
}

.sp-megamenu-parent > li > a {
  display: inline-block;
  height: 33px;
  margin: 0px;
  color: #000;
  background-image: url(/images/WebArt/tab_gold_bg.gif);!important;
}

.sp-megamenu-parent > li > a:after {
  content: url(/images/WebArt/tab_gold_rc.gif) !important;
  height: 31px;
  margin: 0px;
  padding: 0px;!important;
}

.sp-megamenu-parent > li > a > span > span.menu-title {
position: relative;
top: -5px;
}
.sp-megamenu-parent > li > a:hover:before,
.sp-megamenu-parent > li > a.active:before {
  content: url(/images/WebArt/tab_sel_lc.gif);
  height: 31px;
  margin: 0px;
  padding: 0px;!important;
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > a.active {
  height: 31px;
  margin: 0px;
  padding: 0px;
  color: #FFF;
  background-image: url(/images/WebArt/tab_sel_bg.gif);!important;
}

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {padding: 0 0px;}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding:10px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a 
{padding: 4px 7px; } 

#sp-main-body {
    padding: 15px 0; /* change 100px whatever you want. */
}

h3.sp-module-title {color: white; }
#login-form {color: white; }
span {color: white; }
li.item-201 {color: white; }
sp-module._menu {color: white; }

/*body.ltr .sp-megamenu-parent > li.sp-has-child > a:after, body.ltr .sp-megamenu-parent > li.sp-has-child > a:after {
  content: url(/images/WebArt/tab_gold_rc.gif);
  height: 31px;
  margin: 0px;
  padding: 0px;
}

body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a:after {  ##
  content: url(/images/WebArt/tab_gold_rc.gif);
  height: 31px;
  margin: 0px;
  padding: 0px;
}

body.ltr .sp-megamenu-parent > li.sp-has-child > li > a:hover:after, body.ltr .sp-megamenu-parent > li.sp-has-child > a.active:after {
  content: url(/images/WebArt/tab_sel_rc.gif); 
  height: 31px;
  margin: 0px;
  padding: 0px;
}

body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > li > a:hover:after, body.ltr .sp-megamenu-parent > li > a.active:after {
  content: url(/images/WebArt/tab_sel_rc.gif); 
  height: 31px;
  margin: 0px;
  padding: 0px; 
}*/
/*Good set*/
.sp-megamenu-parent > li > a:hover:after,
.sp-megamenu-parent > li > a.active:after {
  content: url(/images/WebArt/tab_sel_rc.gif) !important;
  height: 31px;
  margin: 0px;
  padding: 0px;
}

.article-details .article-ratings-social-share {display: none !important; }

#login-form input.input-small {max-width: 320px;}

21 more replies

Toufiq Senior Staff

4 years ago

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Do you have backup of your site? If yes, Please give me your backup via google drive and i will check what you have done on your end.

-Thanks

Anna del C. Dye Asked this

4 years ago

My host is Siteground. It maintains regular backups. However, I can find no way to download them. Neither can I find a way to download an entire directory to make my own backup. I'm open to any suggestions. I use Mac OS Mojave 10.14.6.

Toufiq Senior Staff

4 years ago

I need a backup of your website which wasn't updated Helix 2.0.9.

Anna del C. Dye Asked this

4 years ago

I have a backup of my site loaded to Google Drive. How do I share it with you?

Toufiq Senior Staff

4 years ago

Please share the google drive link inside the hidden content area. Thanks

Anna del C. Dye Asked this

4 years ago

Here is the file. inside the root folder is my site before the upgrade. Inside the DEV folder is the site after the upgrade. Thanks.

Toufiq Senior Staff

4 years ago

Where is your database? Please let me know. Thanks

Anna del C. Dye Asked this

4 years ago

Sorry, now both production and dev databases are on the Google Drive. I didn't provide the blog database, I don't think you need it.

Toufiq Senior Staff

4 years ago

I will check tomorrow. Please allow me more time. Thanks

Anna del C. Dye Asked this

4 years ago

Any progress on this? Should I install version 2.0.10 into Dev to see if it impacts the issue?

Toufiq Senior Staff

4 years ago

Sorry for the late response.

Any progress on this?

Uploaded database zip file & configured configuration.php file. But, no success.

Should I install version 2.0.10 into Dev to see if it impacts the issue?

You can check this version before keeping a backup

Anna del C. Dye Asked this

4 years ago

My menus are NOT working in either version 2.0.9 or 2.0.10. They really don't have very much custom code. They worked before version 2.0.9. Can't something be done to resolve the issue?

Toufiq Senior Staff

4 years ago

Install your site backup on your localhost
Install Helix 2.0.9 on your site
If it works fine. Then share an backup copy of your site. I will check your current version of Helix.

Anna del C. Dye Asked this

4 years ago

Thanks, rebuilding the environment did correct most of the menu issues. They now display correctly in Safari and Chrome. In Firefox the carets to indicate dropdown menus try to display (Which is not wanted.) The contents of my custom.css is below. Suggestions on how to improve it are more than welcome.

sp-header, #sp-header .logo { height: 40px; }

.sp-megamenu-parent > li > a, #offcanvas-toggler { line-height: 40px; }

body {
line-height: 24px;
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
background-color: #234f80;
}

sp-footer { background-color:#025670

sp-bottom { background-color:#025670

.column { float: left; width: 9.0%; padding: 0px; }
.columns { float: left; width: 7.0%; padding: 0px; }
.columnsa { float: left; width: 2.0%; padding: 0px; }
.columnsb { float: left; width: 5.0%; padding: 0px; }
.columny { float: left; width: 25.0%; padding: 0px; }
.columnx { float: left; width: 75.0%; padding: -15px; }
/ Clear floats after image containers / .row::after { content: ""; clear: both; display: table; }
/Good set/
.sp-megamenu-parent {
float: left;
}

.sp-megamenu-parent > li > a:before {
content: url(/images/WebArt/tab_gold_lc.gif);
height: 31px;
margin: 0px;
padding: 0px;
padding-top: 0px; !important;
}

.sp-megamenu-parent > li > a {
display: inline-block;
height: 33px;
margin: 0px;
color: #000;
background-image: url(/images/WebArt/tab_gold_bg.gif);!important;
}

.sp-megamenu-parent > li > a:after {
content: url(/images/WebArt/tab_gold_rc.gif);
height: 31px;
margin: 0px;
padding: 0px;!important;
}

.sp-megamenu-parent > li > a > span > span.menu-title {
position: relative;
top: -5px;
}
.sp-megamenu-parent > li > a:hover:before,
.sp-megamenu-parent > li > a.active:before {
content: url(/images/WebArt/tab_sel_lc.gif);
height: 31px;
margin: 0px;
padding: 0px;!important;
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > a.active {
height: 31px;
margin: 0px;
padding: 0px;
color: #FFF;
background-image: url(/images/WebArt/tab_sel_bg.gif);!important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {padding: 0 0px;}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding:10px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a
{padding: 4px 7px; }

sp-main-body {

padding: 15px 0; /* change 100px whatever you want. */

}

h3.sp-module-title {color: white; }

login-form {color: white; }

span {color: white; }
li.item-201 {color: white; }
sp-module._menu {color: white; }

/*body.ltr .sp-megamenu-parent > li.sp-has-child > a:after, body.ltr .sp-megamenu-parent > li.sp-has-child > a:after {
content: url(/images/WebArt/tab_gold_rc.gif);
height: 31px;
margin: 0px;
padding: 0px;
}

body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a:after { ##
content: url(/images/WebArt/tab_gold_rc.gif);
height: 31px;
margin: 0px;
padding: 0px;
}

body.ltr .sp-megamenu-parent > li.sp-has-child > li > a:hover:after, body.ltr .sp-megamenu-parent > li.sp-has-child > a.active:after {
content: url(/images/WebArt/tab_sel_rc.gif);
height: 31px;
margin: 0px;
padding: 0px;
}

body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > li > a:hover:after, body.ltr .sp-megamenu-parent > li > a.active:after {
content: url(/images/WebArt/tab_sel_rc.gif);
height: 31px;
margin: 0px;
padding: 0px;
}/
/Good set*/
.sp-megamenu-parent > li > a:hover:after,
.sp-megamenu-parent > li > a.active:after {
content: url(/images/WebArt/tab_sel_rc.gif);
height: 31px;
margin: 0px;
padding: 0px;
}

.article-details .article-ratings-social-share {display: none !important; }

login-form input.input-small {max-width: 320px;}

Toufiq Senior Staff

4 years ago

If you tell me what exactly do you need? It would be good. Or share an screenshot that you want to do. Thanks

Anna del C. Dye Asked this

4 years ago

In Firefox the menu appears like this: where the right side of the menu is wrong.
It should look like this:.

Toufiq Senior Staff

4 years ago

Did you uploaded your site live server or staging server?

Anna del C. Dye Asked this

4 years ago

The updated dev site and related SQL are on the Google drive.

Toufiq Senior Staff

4 years ago

Are you talking about this URL?

Anna del C. Dye Asked this

4 years ago

Thanks

Toufiq Senior Staff

4 years ago

You are most welcome. Will you please spend some to write a review about our product and support quality?

https://extensions.joomla.org/extension/sp-page-builder/