Recent
Categories
View Replies (8)

Nina: reposition header-2 module

0
Votes
Undo
  1. sjudelson
    sjudelson
  2. Sherlock Holmes
  3. Commercial Templates
  4. Tuesday, 04 January 2022
  5.  Subscribe via email
I am using the Nina template.

I repositioned the main menu to the left so it is immediately to the right of the logo by adding “.logo { flex: 0 0 auto; }” to the custom CSS box. I would now like move the items I currently have in the header-2 position down to where the hornav module originally was (ie, justified with the right margin, but now aligned vertically with the logo and the menu).

Is it possible for me to now move the header-2 module down to be aligned with the logo and the menu? Alternatively, can I move these items from the header-2 position to the hornav position and somehow justify them with a suffix or otherwise to the right margin? Perhaps there is a way to add a new module position into the right-justified position the hornav module originally was in?

Thank you!
Responses (8)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

One option would be to add the following to the Custom CSS field of your template settings which will essentially move the position down 110px.

.header-2 {

    position: relative;

    top: 110px;

    z-index: 100;

}


If this solution is not suitable, come back to me and I will find an alternative.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
sjudelson
sjudelson
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Ciaran,

Thank you for the suggestion! The code successfully moved the header-2 contents down the page and, after adjusting the top value from 110px to 60px, I was able to align it with the logo and menu. However, when viewed in portrait mode on a mobile device, the contents of the header-2 module now unacceptably overlap the logo and menu. In addition, an empty area now exists above the logo and menu (where the header-2 contents originally were). The header-1 position is currently empty. I could increase the header-2 top value to move the contents further down so it no longer overlaps, but it would not be exactly where I wanted it (and would still leave the empty space issue). Is there an alternative that would better address these issues or solve the new ones?

The pages are still under development. I will email you the URL of a hidden page where you can better view this issue. Thanks!

Steven
  1. more than a month ago
  2. Commercial Templates
  3. # 2
sjudelson
sjudelson
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Since my prior response, I repositioned header-1 to the right margin (.header-1 { position: absolute; right: 0;} ) and placed some of the content from header-2 into header-1. This solved my desire to eliminate the empty space above the logo and menu. I still have the problem that header-2 is displayed in front of the logo and menu on mobile devices.

Steven
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Steven

Would you have a URL to an example of this issue?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
sjudelson
sjudelson
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for looking into this. I've sent you the URL by email.

Steven
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Steven

We do not appear to have received your email. Could I ask you to resend to info@joomla51.com. Please include a URL to this post for our reference.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width: 440px) {

    .header-2 {

        margin-left: auto;

        font-size: 8px;

    }

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
sjudelson
sjudelson
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Perfect! Thank you for your exemplary support!

Steven:D
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


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