Archived topic

Navigation Logo not fully visible

9 replies · Started by Rene on August 11, 2017

Viewing posts 1–10 of 10

August 11, 2017 at 11:22 am #364089

Hi!
I'm a newbie enthousiastic GP Premium + Elementor starting developer, and I have a problem that I don't know how to solve.

My navigation menu has 100px height, and my logo 200px. I'm not using header.
I want my logo over the body section, but for the moment the body content hides those extra 100px of the logo.
With elementor there's a Z-index. Can I use that in GP for this purpose? How?
Is there any better or cleaner solution?

I would appreciate your help. I've tried many things but no one worked!

Thnx in advance!

P.S.: Thanks for this amazing theme. It's light, clean, and so customizable!!!

August 11, 2017 at 11:37 am #364103

Hi there,

Can you link me to the site? Can't quite picture the issue.

Thanks!

August 11, 2017 at 12:08 pm #364132

Oh, sorry for not including a picture before.
My site is local at this moment.

Here is a picture
https://drive.google.com/file/d/0B4esLC7_pf6cRnlqX0duOThjVzg/view?usp=sharing

Thanks!!!

August 11, 2017 at 12:14 pm #364138

Try something like this: https://generatepress.com/forums/topic/float-logo-and-adjust-size-and-position-keeping-it-responsive/#post-246468

August 11, 2017 at 12:29 pm #364148

Thanks, Leo.
Yes, I already tried yesterday following the instructions of that post, but it doesn't work.
Ok, I managed for publish the site.
Maybe you can see what's happening.
And when you scroll back up the logo stays smaller.

Here's the link
http://renefierros.com/demo1/

August 11, 2017 at 1:03 pm #364167

Try adding this:

.main-navigation .sticky-logo img {
    z-index: 1;
}

August 11, 2017 at 1:14 pm #364175

Yes, that worked!!
Thanks Tom!

Now I have the problem that the logo gets small when scrolling down, but I think I can solve that by myself.
I just have to investigate. Don't worry for that.

Thanks a lot, guys!
You are amazing.

August 11, 2017 at 1:54 pm #364210

Change your CSS to this:

.main-navigation .sticky-logo img {
    height: 200px !important;
    z-index: 1;
}

August 11, 2017 at 4:57 pm #364327

Yessss!!!!
This is exactly what I wanted.
Thanks Leo!
I need some CSS classes, obviously.
;-)

August 11, 2017 at 9:06 pm #364403

You're very welcome!

The developer tool from the browser will be your best friend :)

This archived topic is closed to new replies.

Start building better websites today.