DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Xcillion 2 menu bar overlay problem

Sort:
You are not authorized to post a reply.





New Around Here





    Xcillion 2 is quite a good theme, but I have one problem with using navigation bar / drop-down menu:
    - when you use navigation menu bar or drop down menu (smartphone / tablet view) it visually cover main page content (text / photo), but it seems that links associated with that content are in most top layer on the page.
    As a result - when you want to click on link in menu - its trigger links beneath from underlaying content (content from the page).

    Page(s) with problem URL: https://krscanstvo.eu
    This is NOT 2sxc modules issue - You can see same behavior on https://lokalno.eu (testing site) for Connect and Participate section (original DNN after-installation content).
    (Additionally - I've placed .jpeg images illustrating problematic behavior on my GDrive - link)

    Now - I have found .js that control menu bar behavior for that skin (at least I think that's the one) in:
    /Resources/assets/vendors/smartmenu1.1.0/jquery.smartmenus.min.js and associated sm-core-css.css with following code:

    /* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
       You need this once per page no matter how many menu trees or different themes you use.
    -------------------------------------------------------------------------------------------*/

    .sm{box-sizing:border-box;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);}
    .sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;}
    .sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
    .sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
    .sm ul{display:none;}
    .sm li,.sm a{position:relative;}
    .sm a{display:block;}
    .sm a.disabled{cursor:default;}
    .sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;}
    .sm *,.sm *::before,.sm *::after{box-sizing:inherit;}

    Since positon is used in css, I was thinking of adding z-index, but not sure on which style to implement it and would this resolve problem...

    Any experience with similar problem?
    Any idea how to solve this?
    Tnx in advance.

     






    Veteran Member





      Have you fixed this?

      Joe Craig
      DNN MVP
      Patapsco Research Group





      New Around Here





        Unfortunately not. I've tried, but gave up at the end  - some other tasks were of higher priority...






        Veteran Member





          This is Xcillion 2 which is different than the theme distributed with DNN, right?
          Joe Craig
          DNN MVP
          Patapsco Research Group





          New Around Here





            Right! Here is the link; https://store.dnnsoftware...tails/dnn-xcillion20

            I choose this one mostly because of floating/stick-to-top menu bar, but it seems that changes in CSS are not well done.






            Veteran Member





              Have you approached the theme's developer about this issue? If not, that might be a good thing to do.
              Joe Craig
              DNN MVP
              Patapsco Research Group





              New Around Here





                What I've learned from some other online conversation (https://github.com/dnnsof...atform/issues/2559), is that developers abandoned any further work of that skin, so I supposed that it won’t help much to contact them. Because skin is free to use (no charge), there is no legal obligation either.
                My only hope was that someone already run in to this problem and solved it.

                However - thank You for your effort!

                Edit:
                I am testing right now this skin https://github.com/2sic/d...tstrap3-instant/wiki and will probably give up on Xcillion 2






                Veteran Member





                  If you are looking for a (free) skin, I would recommend

                  All of them are very flexible (especially the first one), free, open-source, responsive...

                  Or have a look at nvQuickTheme, if you want to create your own one.

                  Happy DNNing!
                  Michael

                  Michael Tobisch
                  DNN★MVP

                  dnnWerk Austria
                  DNN Connect





                  New Around Here





                    Thank You Michel! Those are great skins and I already tried them all. They will surely be used in some of my next projects.
                    For this particular project I decide to go with 2sic Bootstrap 4 Instant skin (link), because of simple css re-use across modules and content when used with 2sxc App.

                    Thank You guys once again. Hope this topic will at least offer some solution in way of choice from above mentioned skins / themes for people who face the same problem as I was.

                    You are not authorized to post a reply.

                    These Forums are dedicated to the discussion of DNN Platform.

                    For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

                    1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
                    2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
                    3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
                    4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
                    5. No Flaming or Trolling.
                    6. No Profanity, Racism, or Prejudice.
                    7. Site Moderators have the final word on approving / removing a thread or post or comment.
                    8. English language posting only, please.

                    Would you like to help us?

                    Awesome! Simply post in the forums using the link below and we'll get you started.

                    Get Involved