Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • aalisg Friend
    #1074598

    Hello,

    We are building https://www.li-action.org a website based on Joomla! 3.8.2 and Ja Onepage template and we need your help regarding a few issues.

    First, we have content (Joomla! articles) that do not appear on front end, the pages concerned, which are all related to our footer menu, are: –CONDITIONS GÉNÉRALESCRÉDITSMENTIONS LÉGALESPOLITIQUE DE CONFIDENTIALITÉ.

    Second, we do not like the way the footer menu looks like on normal screens (smaller screens are o.k.): we would like it to appear horizontally and not vertically. Then we would like the mouse hover effect not to be the appearance of a grey background but ideally just an underline. Finally we would like menu elements to be separated by a vertical bar like this one: |.

    Can you please help us to solve these requirements?

    Regards

    • This topic was modified 3 years, 4 months ago by  aalisg.
    • This topic was modified 3 years, 4 months ago by  aalisg.
    Pankaj Sharma Moderator
    #1074632

    Hi
    This can be issue of the template style.
    I tried to fix it but the login details are not working http://prntscr.com/hb202h
    Go to template manager > duplicate your default template style of JA Onepage.
    Now open this new template style > layout > use default layout, save it and assign this template style to the page where you have this issue.

    For the footer menu add this code in custom.css file

    @media(min-width:768px) {
    .ja-copyright .nav {display:flex;}
    .ja-copyright li {padding-left:10px;}
    }

    Hope it helps.

    Regards

    aalisg Friend
    #1075031

    Hello and thank you for your reply,

    Yes it works. What about the others requirements? By the way can you tell me how to center the text, I mean the menu items.

    Regards

    Pankaj Sharma Moderator
    #1075217

    Hi
    Replace the older code with this

    
    .ja-copyright .nav {
        display: flex;
        text-align: center;
        margin: 0 auto;
        max-width: 400px;
    
    }

    Or add

        margin: 0 auto;
        max-width: 400px;
    

    in previous code.

    Regards

    aalisg Friend
    #1075283

    Hello and thank you for your reply,

    The result is not what we expected. Now, on normal screens some menu items are displayed on two lines, there is still the grey background on mouse over and no underline effect. What about the vertical bar like this one: | for items menu separation?

    Regards

    Pankaj Sharma Moderator
    #1075306

    Hi
    To remove the gray colour add this code in custom.css file

    .ja-copyright .nav > li > a:hover {
        background-color: none!important;
    }

    If you want to apply further custom style code, you can use firebug r inspect element from browser to check the style and apply the border-left or right css.
    Also to apply different width for different screen size use media query like in the example I shared.
    Here is documentation of media queries.

    Regards

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

This topic contains 5 replies, has 2 voices, and was last updated by  Pankaj Sharma 3 years, 4 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum