Home Forums Air WordPress Theme Footer Bolding & Menu Font-Size Responsive (Mobile)

This topic contains 12 replies, has 2 voices, and was last updated by  KairosTech 10 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #17645

    KairosTech
    Participant
    Purchased

    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?

    #17646

    KairosTech
    Participant
    Purchased

    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!

    #17647

    SeaTheme
    Keymaster
    Purchased
    Supported

    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~

    #17655

    KairosTech
    Participant
    Purchased

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

    #17656

    KairosTech
    Participant
    Purchased
    This reply has been marked as private.
    #17661

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.

    #17662

    KairosTech
    Participant
    Purchased

    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.

    • This reply was modified 10 months, 1 week ago by  KairosTech.
    • This reply was modified 10 months, 1 week ago by  KairosTech.
    • This reply was modified 10 months, 1 week ago by  KairosTech.
    #17666

    KairosTech
    Participant
    Purchased

    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

    #17668

    SeaTheme
    Keymaster
    Purchased
    Supported

    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

    #17669

    KairosTech
    Participant
    Purchased

    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?

    #17670

    KairosTech
    Participant
    Purchased
    This reply has been marked as private.
    #17680

    SeaTheme
    Keymaster
    Purchased
    Supported

    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;
    }
    #17682

    KairosTech
    Participant
    Purchased

    Thank you! 🙂

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!