Joomla Templates Club 406,261 posts

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1032172

Hello,

I want my Menu Items to appear under the logo and with the Horizontal Line as it does on a medium to a large screen.

At the moment when on an extra large screen the menu items appear to the left of the logo with no hoz line.

Is there any way to do this?

Thanks in advance.

Chris.

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

#1032247

Hi
Open /tpls/blocks/header.php file
and change the column size as showing my screenshot http://prntscr.com/f5pbk8
Now open /templates/ja_brickstore/local/css/themes/dark-peach/template.css
Find and remove below code

@media (min-width: 1200px){
body.header-horizontal .t3-mainnav {
    position: absolute;
}}

Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1032535

Hi – So I believe I made those changes correctly and there is extra space in the ‘menu area, but no horizontal line appears as yet…and I can’t seem to click my menu items whilst using a big screen monitor.

Please advise

---

Attachments:

1. 

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

#1032582

Hi
Use below code in custom.css file to add the border line

@media  (max-width: 5679px) {
  body.header-horizontal .logo {
    float: none;
    border-bottom: 1px solid #e8e8e8;
    margin-left: 0;
    width: 100%;
  }
}

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. Ch1vpH

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1033021

Hi – Thanks it now works with the horizontal line across the top and looks much better!

Although since I added some of the original changes you mentioned in the first part of the thread, another separate problem has re-occurred.

The problem is to do with these bg-coloured blocks or coloured boxes (see image) from the .acm-features module which I did remove from the site with some custom code from another thread….but they have now re-appeared when on a smaller screen.

My question is: Can you help me remove just the coloured ‘bg-white’ boxes but keep the JA ACM Title, Description & Button as I initially needed to have on my site? see example

Please note I have since taken out the custom code I originally used to remove these blocks & below is the code I came up with to remove just the ‘coloured square’

.t3-section-module#Mod161 .acm-features.style-1 .right .features-item.odd .features-item-inner .bg-white { 
position: display:none!; !important;
}

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

#1033033

Hi
Will u be so kind to open a separate thread for a different topic question?
It also helps our community.
Regards

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1033200

Hi there,

I do already have another thread on this subject but it has come to a dead end.

I just thought relevant to this one, as the blocks only re-appeared after making the changes above to do with the Hoz line’ query in this thread.

I’m glad this re-occurred anyway, as I do still need to have these options from acm features-intro module ”title/description/button” on my site.

So should I still do a new thread? – Let me know

Thanks

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

#1033376

Hi
The changes do not belong to header as all classes are different.
to remove the white background use this code in custom.css

.bg-white {
    color: #4c4c4c;
    background-color: transparent;
}

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1042436

Hi there – My site is http://ch1vph.xyz/ri2k/

A while back I set up a ‘hoz-line’ to go across the top of my page, (underneath my logo) and it works ok for most size screens… although when testing on very small screens/devices the horizontal line covers the text part of my logo – see attached image

Please advise if there is a way round this from happening.

---

Attachments:

1. 

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

#1042617

Hi
Add below code in custom.css file

body.header-horizontal .logo {
    height: 120px!important;

}

Hope it helps.

Regards

1 user says Thank You to Pankaj Sharma for this useful post

1. Ch1vpH

[Ch1vpH Friend Ch1vpHJoin date: February 2016Posts: 299Downloads:21Uploads:128 Thanks: 29 Thanked: 1 times in 1 posts]

#1049606

Hi there – My site that I’m currently testing this menu setup on is: http://ch1vph.xyz/ri2k/

My client now wants the ‘menu items’ sat next to the main logo (as it originally was) so I’ve backtracked through every step I took to have the menu items display under the logo! But I do want to keep the menus under the main logo but ONLY after 1280px’s

After 1280px I need to have Menu Items to display next to the logo on either side as it seems to do over 1600’ish pixels…

I have attached some screenshots explaining what I’m after doing just need a little help moving them!

Thanks

---

Attachments:

1. 
2. 

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

#1049642

Hi
Since the question is different than the topic, could u please open a separate thread for this, it also helps other users.

Regards

[Author]

Posts