Joomla Templates Club 406,261 posts

[aalisg Friend aalisgJoin date: February 2013Posts: 130Downloads:30Uploads:7 Thanks: 2]

#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ÉRALES –CRÉDITS –MENTIONS LÉGALES –POLITIQUE 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 7 years, 1 month ago by  aalisg.
• This topic was modified 7 years, 1 month ago by  aalisg.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 aalisgJoin date: February 2013Posts: 130Downloads:30Uploads:7 Thanks: 2]

#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 Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 aalisgJoin date: February 2013Posts: 130Downloads:30Uploads:7 Thanks: 2]

#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 Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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

[Author]

Posts