[Support request] border-radius footer (right-side of screen issue)

[keiron]

Ok, I have set up four icons now as the first options in the footer menu, along with sub-menu items.

(Fingers Crossed we can work out the CSS)

😀 Keiron

[keiron]

So I have managed to disable the toggle using this https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/.

Now its about removing those small arrows and forcing the sub menus to slide up nicely through the centre through css…?

[David]

The parent menu items will need to be dead links ie. add them as a custom link and the set the URL to a #

They can’t link to anywhere as we won’t be able to click on them without navigating away from the page.

[keiron]

Alright, I have done this, so now for the css? 🙂

[David]

Try this for a starter for 10:

.secondary-navigation ul ul, .secondary-navigation ul ul li {
    position: relative;
    width: 100vw !important;
}

.secondary-navigation .inside-navigation li:not(ul) {
    width: 25%;
}

[keiron]

oooo, thanks – we’re getting there i think. Currently it seems to be fighting it a bit. The “drop up” forces close after a second or so and after a couple clicks on the same icon, the sub menu items disappear. Looking really cool though 😀

[keiron]

oooo, thanks – we’re getting there i think. Currently it seems to be fighting it a bit. The “drop up” forces close after a second or so and after a couple clicks on the same icon, the sub menu items disappear. Looking really cool though 😀

[David]

The only issue i am seeing is that some pages are not loading 100% of the CSS. Can you clear any plugin / server caches ( most likely the latter ).

[keiron]

I see, how would i go about doing this? I’m not familar with removing cache? Do i need a plugin to perform this for my website users?

[David]

Check with your host whether there is a cache enabled on the server and how to go about clearing it.

[keiron]

I’ve had a look and cleared cache with Wp super cache – (reccomended by my host) but the same problems seem to be occuring, what i have noticed is that even with icon link set to # when i click on them they seem to load the page of the sub-menu link that appears when the icons slide up.

[David]

Now thats cleared and i have cleared my desktop and mobile browser caches they seem to be working fine.

[keiron]

Hi David, I think the best option for me is to just use the four icons and links with text underneath instead of a sub – menu. Much like the icons shown here https://boygeniusreport.files.wordpress.com/2018/06/tubi-tv.jpg?quality=98&strip=all.

Now, i have set the “menu items settings” to “font awesome” . I am trying to get the text right underneath the icons however the options for the icons do not seem to provide this option. The icons are currently set to text bottom in the vertical align setting – if youre not familiar with the plugin layout – see here (seen here:https://www.maketecheasier.com/assets/uploads/2015/02/menu-icons-select-icon.png).

Thanks a lot for the help!

[David]

I think thats a better UI 🙂

Try this CSS:

.secondary-navigation .main-nav ul li a {
display: flex;
flex-direction: column;
padding-top: 15px;
}

[keiron]

Cool, ok, so the issue now is that the menu items no longer centre in the menu, and the text doesnt seem to be directly centred under the icon.

I am not sure if the menu icons theme by themeisle is adding spacing to the side of the text – to distance it from the icon, then it remains as we push it down below the icon??…..

update 1: I have found that the icons have margin top and right with the right equal to “margin-right: .25em;” – i am guessing this is preventing the central align of the text underneath the icon?

update 2: I have managed to remove this margin with “._mi._before.fa.fa{margin-right:0 !important;}”
however, you can still see that “articles” is slightly fruther aligned to the right than the left and not perfectly centred below the the icon – and obviously the whole menu still remains not centred. Im not sure if it is the flex causing the centre alignment of the menu?

Thanks for your patience by the way :S.

[Author]

Posts