Recent
Categories
View Replies (4)

Moving Slideshow Image Under Semi-Transparent Header on Everly

  1. Issue
0
Votes
Undo
  1. smithjd44
    smithjd44
  2. Sherlock Holmes
  3. Commercial Templates
  4. Friday, 04 December 2020
  5.  Subscribe via email
I am attempting a website design for a company which is detailing how they want three pages of the website.

I have been successful in using the Everly template and using Module Overrides to construct their homepage according to their instructions with some exceptions.

They are wanting the top portion of the slideshow to start in the position that displays under a semi-transparent header.

What I have displays that only when they scroll down.

I would appreciate it if you had some Custom CSS that would allow the top portion to start in that position before they start to scroll down the page.

I have attached a PDF of their desired homepage along with a URL of the website under construction.

Also you will notice they wanted an underline of the four modules. Would there be custom css code to underline module titles as well as code to make the font a little smaller so all of their titles will fit on one line.

As for as the red squares they told me that I could use the Winggings Font Letter "N". I will be working on setting up an unordered list to hopefully fix that.

As always, you have always been so helpful in my web design business. I have mentioned before Joomla51 are the only templates that I use in designing my websites.

Thanks again!

James
Attachments (1)
website-homepage.PNG website-homepage.PNG
References
  1. http://tempdomain51.site
Responses (4)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

Presuming I understand you correctly, to amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.sticky-wrapper {

    position: absolute;

}

.top-2 .module_header {

    text-decoration: underline 3px red;

    margin-bottom: 5px;

}


Hope this helps.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
smithjd44
smithjd44
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
The coding worked great for the desktop view for the sticky-wrapper portion of my request.

On the mobile view the logo / menu overlaps the Part Manufacturing.

Is there CSS code that would prevent the overlapping?

Also the red and underlined Top 2 Module Title worked as well.

What would be the css code to reduce the font such that I could have a single line text?

I could make a copy of the template and assign to the Homepage only if that text size is not needed to other pages.

I really appreciate the custom CSS codes!

James
References
  1. http://tempdomain51.site
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi James

To only apply the above mentioned CSS to large screen devices, try replacing with the following...

(edit to taste)...

@media only screen and ( min-width: 767px ) {

	.sticky-wrapper {

    	position: absolute;

	}

	.top-2 .module_header {

	    text-decoration: underline 3px red;

	    margin-bottom: 5px;

	}

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
smithjd44
smithjd44
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you! That fixed the issue perfectly!

Thanks again!

James
  1. more than a month ago
  2. Commercial Templates
  3. # 4
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!