Footer Bolding & Menu Font-Size Responsive (Mobile)

[KairosTech]

Hello I have recently added a footer menu to the bottom of the page but the problem is the text does not look different from the copyright text (which is also in footer).

Is there any way to make this footer menu that I have added be bolded and be a little bit bigger in size compared to the copyright text that is also beneath it?

Also I would like to know is there any way to make menu items (in the navigation menu) be a little more responsive on mobile? Like for example on the page that I have provided as an example, clicking on the MENU (top right) and then tapping Our Products you can see that “Adobe Creative Cloud” takes two lines of space on mobile and it looks bad. Is there any way to make it look more pleasing without decreasing the font size of the menu altogether?

[KairosTech]

Footer example (scroll down below): https://www.kairos.com.my/
Menu example can also be found above ^ hopefully try and not change the font size on desktop. Only mobile!

[SeaTheme]

Hi,

The custom CSS is for the menu on footer:

@media(max-width:767px) {
.footer-menu .menu-item > a {  font-size: 12px; }
.footer-container {display: flex;  flex-direction: column-reverse;}/*beneath copyright*/
}

The CSS is for menu item on menu panel, if you don’t want to change the font size, you could change the letter spacing, it should be in one line:

@media (max-width: 812px) {
.responsive-ux #navi a {  letter-spacing: 0; }
}

Regards~

[KairosTech]

Is there a way to bold the menu items that is in the footer menu?

[KairosTech]

This reply has been marked as private.

[SeaTheme]

Add the font-weight: bold; in the CSS:

@media(max-width:767px) {
.footer-menu .menu-item > a {  font-size: 12px;  font-weight: bold; }
.footer-container {display: flex;  flex-direction: column-reverse;}/*beneath copyright*/
}

Also for the menu item in main menu panel there is a bug where……

I don’t find the issue, I don’t understand your question maybe. Please give more tips, better paste a video.

[KairosTech]

Yeahp I added exactly your code for the font-weight: bold; but it still not showing on the page on desktop. I have added an image showing the result after adding your code in the Custom CSS.

View post on imgur.com

If the image may appear unclear please click it to be shown on Imgur clearly.

[KairosTech]

For the menu item in main menu panel that i said there might be a bug, I have added the image below. I was describing how the elements should be pushed a little bit to the left from the arrow or better yet right next to the arrow rather than beneath it. It looks a bit weird dont you think?

View post on imgur.com

[SeaTheme]

Because the CSS is for mobile.

Please update the CSS:

@media(max-width:767px) {
.footer-menu .menu-item > a {  font-size: 12px;  }
.footer-container {display: flex;  flex-direction: column-reverse;}/*beneath copyright*/
}
.footer-menu .menu-item > a { font-weight: bold; }

Plz adjust the arrow to right/left by CSS:
.menu-item-back-a.archive-arrow {margin-left: 2px;}
if you set margin-left as negative like -2px, it will move to left

[KairosTech]

Thanks, the footer is now bolded. For the menu where you suggested to adjust the arrow I tried margin-left: -15px; since I wanted the text to be a little more to the right from the arrow. The problem is on desktop it shows that but on mobile the arrow is too much to the left side of the page as shown below in the image:

View post on imgur.com

Is there any way to making the arrow align centrally and have the text aligned centrally too?

[KairosTech]

This reply has been marked as private.

[SeaTheme]

Please add custom CSS:

 #navi ul li ul.sub-menu li  { 
    text-align: center;
}
.menu-item-back-a { 
    margin-left: auto!important;margin-right: auto!important;
}

If you want to level 1 menu centered, add custom CSS:

 #navi ul li  { 
    text-align: center;
}

[KairosTech]

Thank you! 🙂

[Author]

Posts