Support » Theme: Olsen Light » Problem with dropdown submenu items in menu

  • Hi, I thought I’d post this in a new topic as it might have gotten lost in replies under a different matter.

    Since a day or five now, my once perfectly working main menu with two dropdown menu items doesnt work anymore on desktop (now one not working, so you can see what I mean, I deleted the other for the time being). When hovering on the main menu item where the dropdown is, you can see the submenu items, but once hovered off the top one, it disappears. So my website doesnt work properly on desktop.

    Last week everything was perfect, until I discovered that my footer credit line (Copyright Andrea de Jong etc) was missing. I figured this had disappeared with a WordPress or theme update earlier. So I put it back in my footer at the exact same spot. I always have a backup of my original footer and the footer in place, in case something goes wrong. But putting the credit line back in broke my mobile menu (after a click on the menu on phone, the menu color changes but it does not open and the website freezes completely).

    So I re-copied the former footer and put my credit line in there. Now the mobile menu worked perfectly again. But! Now there is no menu dropdown option on DESKTOP. The arrows besides the dropdown menu items are gone, and there is the problem as described above.

    Last night I compared both the older footer and the newer footer in my laptop notes, but the few things that were different do not make it work magically again if i put these in or out (I was hoping for that) so I left it all carefully the same.

    I dont know if the problem IS actually in the footer, but since it started once I changed it, I figured I’d put it in.

    These are the differences between both footer versions:

    older: <div class=”col-md-12″>
    versus newer: <div class=“col-12”>

    This is in the newer one and is missing in the older one:
    <div class=”navigation-mobile-wrap”>

    <?php esc_html_e( ‘Close Menu’, ‘olsen-light’ ); ?>

    <ul class=”navigation-mobile”>
    </div>

    Older: <?php echo wp_kses( sprintf( __( ‘Copyright’, ‘olsen-light’ ),
    Versus newer: <?php echo wp_kses( sprintf( __( ‘Olsen WordPress Theme by CSSIgniter‘, ‘olsen-light’ ),

    Again, not sure if the footer is even involved in this issue, but better safe than sorry I guess.

    Can you please help me? What to do?

    Thank you!
    Andrea.

    • This topic was modified 11 months, 3 weeks ago by andrea1451986.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 19 total)
  • Hi @andrea1451986
    please reinstall the theme, since it might be broken.
    Use this method to change the copyright text https://www.cssigniter.com/kb/easily-modify-theme-strings/ and dont edit this time any theme files

    Let me know if this worked for you.

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi @markwaregr! Thanks for your msg. Can I just reinstall the theme without making any backups? I have no idea how to do this properly without losing any data or any modifications I might have done years ago. Thanks, Ill wait for your reply to do anything.

    Hi,
    Always backup! But, If you have made code changes (not custom css ones under Customize->Additional CSS). You might need to create a child theme first.
    So,create a child theme, copy over the files you have altered (not functions.php) and make the modifications there. This will allow your changes to survive future theme updates. If you directly edit the theme’s files, all changes will be lost once you update.

    Have a look at this guide to learn more about child themes and how to create one http://www.cssigniter.com/ignite/beginners-guide-child-themes/

    Reminder, in the latest WordPress version if you just reinstall the theme you can replace all theme files automatically https://www.cssigniter.com/kb/how-to-update-your-theme-using-wordpress/
    Let me know if you need additional help with this.

    You can also download a fresh copy of the same version you are using, and compare it against your installed one, using a diff tool, such as Meld.

    This will help you pinpoint the changes you’ve made to the original files, so that you’ll more easily transfer everything needed to a child theme.

    As Fotis said, always backup! Both periodically and before doing any code changes or updates. No excuses!

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi guys @anastis and @markwaregr, thanks so much for this, all clear and will do! Just one last question: I always work on my website from a browser, I havent installed anything on a FTP or anything. How does ‘downloading the theme again’ work for me, once Ive made backups/child themes? Not sure how to go about that. Everything else you said is crystal clear! Thanks again!

    If you’re talking about the latest theme version, you can just go to https://wordpress.org/themes/olsen-light/ and download it using your browser. You can then upload/install it via your dashboard > Appearance > Themes > Add New > Upload.

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi @anastis, thanks! I am a bit confused about downloading something that is already there now. I already HAVE Olsen light right now. Do I delete it first or how can it be downloaded again if I already have it? Hahaha Im sorry. 🙂

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi guys @anastis and @markwaregr, so I did everything above. My host makes backups always, but I made a backup now of my entire site with the plugin All in one WP Migration.

    Then I downloaded the plugin Child Theme Configurator and made a child theme. I copied all my .php-files except functions.php (that was also pointed out there, like Fotis said as well). I activated the child theme, everything seemed fine so I did that. Then I also for the hell of it downloaded the Olsen Light theme again, replaced it with the same version I already have haha, because it was already there and uploaded before I made my backup. So now, I have the exact same thing as I had before I asked about how to fix my menu. The child-theme is activated. And it is still the same; my dropdowns don’t work still.

    What to do now? I can still look at the Meld tool you mentioned Anastis, but that is as far as my knowledge goes to try and fix this mother.

    Any tips? I am thinking about going with a different theme altogether tbh, but I dont want to, cause I have so much work and hours into this one and I love the way it looks. And it’s so much work to fix hiccups if many of these things require googling ;).

    Thankful as always for the agic trick that will make my menu work again. I remain your humble servant. Ok well not really, but still! You get my point.

    Andrea.

    Hi,
    I am certain you are passing some bad behaving code you have made previously into the child theme, since I believe this does not happen now in the parent theme, correct? Which PHP files have you changed and in which way? Can you share them here https://www.cssigniter.com/support-hub/ ?

    The best way to proceed is, activate the fresh parent theme. Redo your code changes there and see which one causes the issue

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi @markwaregr,

    Thanks for your msg.
    It WAS happening in the parent theme, because i edited my footer (i JUST put back an older footer from before a wordpress or theme update) because this one HAD my copyright line in it. Then it all came tumbling down. My mobile menu stopped working. So I put back the later footer version which I had backup on my computer before putting back in the earlier footer. Then I added my copyright line in the exact same spot as the footer before. But then my dropdowns stopped working. That is all that happened really, it is a mystery to me.

    So now, I think Ill have to download the theme fresh on my computer and look at THAT footer and compare it to the one in my own parent/child (no difference now between those) files to spot differences?

    A whole different issue now:
    I accidently put back a back-up from my website and database through my host, from a day too early (a day where I made a few pages and wrote a lot of new content, which now is all lost). I am going mad, such a stupid mistake.
    I already contacted my host to ask if they still might have a backup from later, so all wont be lost, but I am fearful. I do have a back-up myself, but now when i try to import it, it says my server has a 32mb limit, so I have to edit my wp-config.php file or my .htaccess file. Both of which I would have to get an FTP-client for AND my FTP logins, both I do not have because I always worked from browser. Im about to lose it haha.

    Anyway, if you could please answer my first question (about downloading a fresh theme copy and check the differences on this version on my HD with the one I have uploaded now?

    Thanks for your help. Once again. I wish I had someone beside me who could just fix it in three minutes. :’)

    Andrea.

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi @markwaregr and @anastis,

    Responding to @markwaregr’s line ‘I am certain you are passing some bad behaving code you have made previously into the child theme, since I believe this does not happen now in the parent theme, correct?’

    I now know that downloading the OL theme fresh and uploading it, does not fix the dropdown menu issue. I now have a new Olsen light parent theme without any changes in the php-files and when this is activated, the menu still does not work. I tried testing if maybe deleting all my extra CSS in the customizer would do anything, but it doesnt.

    Can you please look into it? Comparing the php files of a freshly downloaded theme (activated as a parent) with the files of my child theme doesnt seem to help if the fresh new parent theme gives the same issue right? What am I missing?

    Hi,
    can you add

    @media(min-width:991px){
    .navigation li:hover > ul,
    .navigation .sfHover > ul {
      top: 18px;
    }
    .navigation > li > a {
        margin-right: 15px;
    }
    .site-bar .nav{
     width:80%;   
        position:absolute;
    }
    }

    in your custom CSS box under Customize-▸Additional CSS

    Does this help (I see the dropdown only in the second menu)?

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi @markwaregr,

    No sorry, it doesn’t do anything for my dropdown menu. Yes I had two dropdowns (one for Tarieven too; Tarieven-tarieven tekst & tarieven fotografie), but I deleted one by adding the two Tarieven-submenuitems as main items, because I have to have these pages on there.
    The ‘Tekst’ drop down still disappears once you stop hovering it. The code you sent makes the menu wider and cut into my social icons. I am just so curious why the arrow (upsidedown ^) next to Tekst would disappear and just stop functioning? Basically dropdowns arent an option anymore. Are more people experiencing it right now in their parent?

    Thread Starter andrea1451986

    (@andrea1451986)

    Hi @markwaregr @anastis can you please help me? If you dont know whats wrong, where could i go for help? No one knows what is up. This needs to get fixed asap, it has been down for a week now. Thanks!

    Thread Starter andrea1451986

    (@andrea1451986)

    Sidenote I just discovered: when I add my menu as a top menu as well, at the top of the screen, the dropdown of Tekst works. Like charm. But I dont want it there, never had it there, doesnt look good. Maybe that info helps, it working at the top? Hope you can help.

    Edit: when inspecting the different spots of the menu item ‘Tekst’ (top and main) which has the dropdown, i find this. Maybe it can help?

    The proper working top dropdown item Tekst at the top:
    li#menu-item-2919.menu-item.menu-item-type-custom.menu-item-object-… en het is 83px x 17 px, vanwege pijltje

    Also:

    <li id=“menu-item-2919” class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2919”>
    = $0
    “Tekst”
    : :after

    <ul class=“sub-menu” style=“display: none;”>
    <li id=“menu-item-2923” class=“menu-item menu-item-type-post_type etc….

    The not working dropdown item Tekst below header logo:
    li.menu-item.menu-item-type-custom.menu-item-object-… 73px x 17px

    Also:

    <li class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2919”>
    Tekst = $0
    <ul class=“sub-menu”>
    <li class=“menu-item menu-item-type-post_type etc…

    On the right it says for the good working one:
    .navigation a.sf-with-ul {
    padding-right: 10px;
    position: relative;
    }

    And on the right for the broken one:
    .navigation > li > a {
    text-transform: uppercase;
    }

    • This reply was modified 11 months, 2 weeks ago by andrea1451986.
Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Problem with dropdown submenu items in menu’ is closed to new replies.