Center and Enlarge Logo and Keep with Logo Placement

Good afternoon WPMU developer support team! Hope your day is a beautiful one!

I have a little issue on this site: pennynicholslightingdesigns.com

When you build the menu in Qode and you wish to center the logo, the logo centers above the menu items, which are also centered. My goal is to move the logo to the middle of the menu items and have the logo be slightly larger than the header container. This theme combines the navigation and header into one container so this was a bit tricky. Sadly, I had a solution on canvas and moved this particular site over to Qode at the last minute..hence squashing my solution and leaving me to attempt many renditions of CSS until finally I reach out to y'all :slight_smile:

So far I have managed to center the logo and get it outside of the container. I have also moved the menu items to the left and right as to avoid an overlap.

The issues that I am having now surround making the logo larger and bringing its homepage link with it. I have tried to increase the image size in many ways and have also attempted to move the link along with it but apparently my CSS knowledge has hit a wall.

Here is what I have added so far:

.container{
position: relative !important;
}

.q_logo{
position: absolute !important;
left: 40%;
z-index 1150;
bottom: 5%;
width: 300px !important;
height: 200px !important;
}

.q_logo a{
position: absolute !important;
width: 300px !important;
height: 200px !important;
top: 5%;
left: 40%;
}
.q_logo img{
width: 300px !important;
height: 200px !important;
}

header .centered_logo .q_logo a {
display: inline-block;
vertical-align: middle;
position: relative;
}

#nav-menu-item-108{
margin-right: 280px;
}

#nav-menu-item-110{
margin-left: 30px;
}

After all of this, I cannot seem to make the logo bigger and leave the container and I am losing the alignment of the link attached to the logo that returns the user to the homepage…

If you can send me some CSS that will make the logo larger, keep its link and overflow its container to the south, that would be swell :-p

Have a great one and I hope to hear back from you soon!

Pura Vida,
Mandy

  • Tyler Postle

    Hey Mandy,

    Hope you're doing well today and thanks for your question!

    I haven't used the Qoda theme myself; however, after taking a look it appears you have the .q_logo width and height set in your above CSS with the !important declaration, meaning you won't be able to over-ride that size unless you change it there or remove the !important.

    Also, when I viewed your site, the logo didn't have any link. It normally has a link?

    What is the size of the image when originally uploaded?

    Look forward to hearing back Mandy! Hope you're having a great day.

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.