Helix Ultimate Menu Display - Question | JoomShaper

Helix Ultimate Menu Display

AD

Anna del C. Dye

Helix Framework 1 year 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?

0
22 Answers
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #77046

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;}
0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #77529

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/

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #77495

Thanks

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #77043

Are you talking about this URL?

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #76979

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #76932

Did you uploaded your site live server or staging server?

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #76912

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #76887

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

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #76811

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;}

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #76369
  1. Install your site backup on your localhost
  2. Install Helix 2.0.9 on your site
  3. If it works fine. Then share an backup copy of your site. I will check your current version of Helix.
0
AD
Anna del C. Dye
Accepted Answer
1 year ago #76278

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?

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #75239

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

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #75197

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #73940

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

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #73934

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #73861

Where is your database? Please let me know. Thanks

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #73590

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #73502

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

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #73346

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #73295

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

0
AD
Anna del C. Dye
Accepted Answer
1 year ago #73237

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.

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 1 year ago #73179

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

0