I'm still working on my website and I have a few small issues, which I haven't been able to fix myself. Two of them are concerning the (mobile) menu on the side again. :-)
1. I have been styling the menu, but there is one detail I haven't been able to adapt or find in Wordpress. It's the small line that gradually appears under the links while hovering them. How can I make it disappear?
2. Sometimes after opening a page and returning to it (after checking another page in a different tab, or just after scrolling down and up again, usually some time has passed in the meantime), there has 'grown' a white space between the logo/hamburger menu and the text below it. It happens on my phone and desktop. I've added screenshots from my phone of two times it happened and another screenshot of how the website looked after refreshing the page again (how it should look). What might cause this to happen?
3. The third question is simple again, I hope. I would like my mobile menu to have the same styling as my desktop menu: colours and fonts. Is this possible?
2. Unfortunately I cannot reproduce the issue, tried many times but could not replicate it, can you please record a video to explain how we can replicate the same issue?
3. I don't have the login credentials to make some changes so please try to add the following CSS to Custom CSS for these changes.
P.S. Some of these "issues" are actually customizations which are not included in theme support. If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
I've just found some more information on issue 2 at the beginning of this post. Right now Safari is showing my website with the white space at the top again. Now I know exactly when it happens: every time I open a new tab and go to my website, it happens. After refreshing, the white space is as it should be. Scrolling up and down doesn't change it. What does change it, is resizing the window in which Safari is open. After making it smaller and then fullscreen again, the white space is adjusted to the right size as well.
After investigating the issue I came to the conclusion that the issue is caused by Smush and it's Lazy Load feature, so once I started to disable it on the homepage I was sure the lazyload was causing the problem and then I have excluded the logo from being lazy loaded by adding the following class to the exclusion list:
.upje
Tested it many times after this fix and it did not occur anymore, please try it on your own.
Today I noticed something on my portfolio. When clicking an item and viewing the bigger version with info, there are to arrows on the right at the bottom of the page. When you click next, you're actually going back to the item that's shown before the current item. This seems a bit confusing. Would you know how I could adjust this?
The navigation arrows in single portfolio projects are according to the WordPress guidelines which was changed in version 3.2.1 of Kalium as before this version it was the other direction.
That requires adding custom PHP code to your site but I can see you are not using the Child theme for that, I have installed the child theme so you can now activate it and add the following code to functions.php of Kalium child theme:
Hello there!!
I'm still working on my website and I have a few small issues, which I haven't been able to fix myself. Two of them are concerning the (mobile) menu on the side again. :-)
1. I have been styling the menu, but there is one detail I haven't been able to adapt or find in Wordpress. It's the small line that gradually appears under the links while hovering them. How can I make it disappear?
2. Sometimes after opening a page and returning to it (after checking another page in a different tab, or just after scrolling down and up again, usually some time has passed in the meantime), there has 'grown' a white space between the logo/hamburger menu and the text below it. It happens on my phone and desktop. I've added screenshots from my phone of two times it happened and another screenshot of how the website looked after refreshing the page again (how it should look). What might cause this to happen?
3. The third question is simple again, I hope. I would like my mobile menu to have the same styling as my desktop menu: colours and fonts. Is this possible?
Thanks a lot in advance!!
All the best,
Netty
Attached files: IMG_4387.PNG
IMG_4385.PNG
IMG_4386.PNG
Hi Netty,
1. Add the following CSS to Custom CSS:
.sidebar-menu-wrapper.menu-type-sidebar-menu .sidebar-menu-container .sidebar-main-menu ul.menu > li > a:after { display: none; }2. Unfortunately I cannot reproduce the issue, tried many times but could not replicate it, can you please record a video to explain how we can replicate the same issue?
3. I don't have the login credentials to make some changes so please try to add the following CSS to Custom CSS for these changes.
.mobile-menu-wrapper .mobile-menu-container div.menu>ul>li>a, .mobile-menu-wrapper .mobile-menu-container ul.menu>li>a { display: block; padding: 5px 30px; color: #333; text-decoration: none; font-size: 19px; text-transform: uppercase; font-family: dolly-new, sans-serif !important; font-weight: 200 !important; font-style: normal; letter-spacing: 0.02em; line-height: 46px !important; font-size: 24px !important; color: #faf7f3 !important; text-transform: capitalize !important; text-decoration: none !important; position: relative; top: 64px !important; left: -30px !important; -webkit-font-smoothing: subpixel-antialiased; }P.S. Some of these "issues" are actually customizations which are not included in theme support. If you're looking for professional help in this matter, there's always someone available for such tasks on the WP Kraken or Codeable. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.
Best regards,
Laborator Team
Hi again,
I have added another CSS in the Custom CSS area, now the whole mobile menu container is the same color as your site background.
Best regards,
Laborator Team
Thank you so much, Art! It looks great!
Best regards,
Netty
Happy to hear that Netty, have a great week
Best regards,
Laborator Team
Thank you, Art! You too!!
I've just found some more information on issue 2 at the beginning of this post. Right now Safari is showing my website with the white space at the top again. Now I know exactly when it happens: every time I open a new tab and go to my website, it happens. After refreshing, the white space is as it should be. Scrolling up and down doesn't change it. What does change it, is resizing the window in which Safari is open. After making it smaller and then fullscreen again, the white space is adjusted to the right size as well.
Do you have any idea what might be the cause?
Thanks a lot in advance!!
Regards!
Netty
Attached files: Screenshot 2024-02-12 at 15.05.14.png
Hi Netty,
After investigating the issue I came to the conclusion that the issue is caused by Smush and it's Lazy Load feature, so once I started to disable it on the homepage I was sure the lazyload was causing the problem and then I have excluded the logo from being lazy loaded by adding the following class to the exclusion list:
Tested it many times after this fix and it did not occur anymore, please try it on your own.
Best regards,
Laborator Team
Thanks a lot, Art! It looks great and I appreciate it a lot.
You're welcome Netty, have a great day
Best regards,
Laborator Team
Thank you, Art!
Today I noticed something on my portfolio. When clicking an item and viewing the bigger version with info, there are to arrows on the right at the bottom of the page. When you click next, you're actually going back to the item that's shown before the current item. This seems a bit confusing. Would you know how I could adjust this?
Thanks in advance!!
All the best,
Netty
Hi Netty,
The navigation arrows in single portfolio projects are according to the WordPress guidelines which was changed in version 3.2.1 of Kalium as before this version it was the other direction.
That requires adding custom PHP code to your site but I can see you are not using the Child theme for that, I have installed the child theme so you can now activate it and add the following code to functions.php of Kalium child theme:
// Swap next/prev adjacent links add_filter( 'kalium_adjacent_post_link_args', function ( $args ) { if ( $args['prev'] ) { $args['prev'] = false; $args['next'] = true; } else { $args['prev'] = true; $args['next'] = false; } return $args; } );Best regards,
Laborator Team