custom header LT Shop

SupportCategory: Joomla! Template Questionscustom header LT Shop
AvatarDon Mujeriego asked 4 months ago

Hi guys, 
I am using the LT Shop Pro template. However, I rather would like to use the predefined header of LT Fashion with the social media icons. Could somebody explain me how to setup this predefined header from LT Fashion as a custom header in LT Shop?
Thanks in advance
 

AvatarJustin B. replied 4 months ago

I added a custom HTML widget in the top right and top left menu and took the html from the other theme. Then I had to add the following which you may not have to do to style.css located in the theme folder:

.site-header {
top: 30px!important;
}
.site-header.is-sticky {
top: 0px!important;
}

4 Answers
KelvinKelvin Staff answered 4 months ago

Hi,
You just go to Template Settings > Layout, then create new Row and place it on top of website.
Then, on new Row, you make 50%-50% layout style, and put position ‘top1’ and ‘top2’ for them. 
Last, go to tab “Basic” find option “Social” and “Contact Information”, then set your content.

AvatarDon Mujeriego replied 4 months ago

Hi Kelvin,

So far I manage to make a new Row as a custom header, but I made two rows in order to put the social media icons, logo and contact information, and underneath the first row, the second row just for the menu.

Is there a way to crop the 2 rows into 1 row? So the social media icons, logo, contact info and the menu in one row.

AvatarDon Mujeriego replied 4 months ago

Hi Kelvin,

So far I manage to make a new Row as a custom header, but I made two rows in order to put the social media icons, logo and contact information, and underneath the first row, the second row just for the menu.

Is there a way to crop the 2 rows into 1 row? So the social media icons, logo, contact info and the menu in one row.

KelvinKelvin Staff replied 4 months ago

Can you send me your site URL? So, I can help.

AvatarDon Mujeriego replied 4 months ago

the website is still on localhost unfortunately

KelvinKelvin Staff replied 4 months ago

You can re-saparate columns for Row, with 1/3 1/3 1/3, so you can put Logo – Social Icons – Contact Info on one row.

AvatarDon Mujeriego replied 4 months ago

I have now set 1 row, divided in 3 columns, for the social media icons logo and contact info. And 1 full row for the mega menu under the first row. However, I would like to have both rows in 1 row. Is this possible?

KelvinKelvin Staff answered 4 months ago

Can you attach me screenshot about that?

AvatarDon Mujeriego replied 4 months ago

How can I attach a screenshot?

KelvinKelvin Staff answered 4 months ago

Please upload to anywhere such as Dropbox.com and send me a link to see.

AvatarDon Mujeriego replied 3 months ago

Hi Kelvin,

Hereby I send you the link to the printscreen of the menu.

https://www.dropbox.com/s/0y1e84m78iyak3x/printscreen%20custom%20header%20.jpg?dl=0

With kind regards

KelvinKelvin Staff replied 3 months ago

Thank you, I see your mean. But it’s impossible, can’t place Row in Row. I see new Row and place Mainmenu is good, why do you want to make it in same Row?

AvatarDon Mujeriego replied 3 months ago

I want to have the menu centered in the middle. At this moment it is positioned to the right. Somehow I cant manage to center it.

AvatarDon Mujeriego replied 3 months ago

And I want to be menu sticky when I scroll down.

KelvinKelvin Staff replied 3 months ago

Unfortunate, in this case you must bring website to temporary hosting and send me a link, so I can help. Because this issue related to custom work with CSS, can’t guess code if your website still on localhost.

AvatarDon Mujeriego replied 3 months ago

Oke, thats unfortunate. Can I post here the css script? if so, I would like to know from which file you need to see the script.

AvatarDon Mujeriego replied 3 months ago

I made a printscreen of inspect element of the menu. Can you use this? here is the link to the printscreen in my dropbox:

https://www.dropbox.com/s/av6hk58l8vphrh5/printscreen%20custom%20menu.jpg?dl=0

AvatarDon Mujeriego replied 3 months ago

I put this in the custom css of the template:

#sp-custom-menu {
background-color: #161616;
color: #ff02020;
padding-right: 30%
}

By adding padding-right: 30% it appeared that the menu is now positioned more in the center (not fully centered though)

Im only afraid that this will not make it responsive
Is this correct?

KelvinKelvin Staff replied 3 months ago

Try to make

#sp-custom-menu {
background-color: #161616;
color: #ff02020;
text-align: center;
}

AvatarDon Mujeriego replied 3 months ago

and what does the code need to make the custom menu sticky?

KelvinKelvin Staff replied 3 months ago

Sticky menu is option that you can enable it on Template Settings > Basic, find option “Sticky Menu”.

AvatarDon Mujeriego replied 3 months ago

I enabled the option Sticky Header, but this didnt do anything. I couldnt find sticky Menu.

KelvinKelvin Staff replied 3 months ago

Can you check if it works on other pages? Some time some plugin on your homepage will conflict with this function.

AvatarDon Mujeriego answered 2 months ago

Hi guys, 
Could anybody help me with how I can put the logo row and the menu as sticky?
 
Your input is appreciated
 
 

KelvinKelvin Staff replied 2 months ago

Hi,

Do you want to sticky all block as screenshot? http://take.ms/quFbg
It’s too big.

AvatarDon Mujeriego replied 2 months ago

I want to have the header (social icons, Logo, Contact Info) to be sticky.

AvatarDon Mujeriego replied 2 months ago

If it can’t be both

KelvinKelvin Staff replied 2 months ago

So, there is no menu bar on sticky?

AvatarDon Mujeriego replied 2 months ago

That is correct

KelvinKelvin Staff replied 2 months ago

Please resend me admin login to email admin@ltheme.com, so I can help.

summer discount

eskişehir escort izmit Escort bursa escort bayan ankara escort bayan van escort bayan elazığ escort bayan erzurum escort bayan
[Big Update] All Joomla! templates are ready with Joomla! 3.9.x (latest), upcoming with Joomla! 4 Learn More!
[HAPPY 14TH BIRTHDAY TO JOOMLA!] 50% OFF Coupon Available Now! Limited Time => Get Coupon Code!