Header Formatting Help - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
August 7, 2018 at 5:05 pm #994489

raisonbrands
Participant

Hi There,
I’m following up from my other open ticket: #980201. I haven’t gotten a response in a few weeks, so opening a new ticket as that one has become quite long.

Can you help me with the following? I’ve tried updating on my own, but I think because there is custom code in there already, my updates aren’t working:

1. We would like the menu flyout to be on the same side as the burger menu icon. Can we just move burger icon and magnifying glass to the right as it is normally?
2. We would like the logo to be centered in the browser window. Right now, it’s slightly off centered. See image here https://imgur.com/a/tc4rEqo notice how the logo is not aligned in the center of the navigation bar
3. I’m trying to adjust the size of the logo so it appears slightly larger in the navigation. I think because of the custom code that was added, everything I try to do is overrided. Can you explain how I can achieve this look (slightly larger size and centered logo): https://imgur.com/a/EmIiI30
4. On hover, I would like the menu links to change to white (on the red background). There is not an option to change text color on hover in the advanced styling Menu Icon / slide out feature.

Thank you so much in advance for your help!

August 9, 2018 at 10:21 am #995348
Dude
Participant
Hey raisonbrands,

First please excuse the late reply.

We would like the menu flyout to be on the same side as the burger menu icon. Can we just move burger icon and magnifying glass to the right as it is normally?

I added this code to the quick css field to move the menu button to the right:
```
#top  #wrap_all .main_menu {
    position: absolute !important;
}
```
I also centered and increased the logo image with this code:
```
.responsive #top #wrap_all #header #header_main .inner-container .logo {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    min-height: 100px;
}
```
You can replace the min-height value (100px) with a lower or higher value to adjust the logo size. You can also add a min-width value to the code. Please don’t forget to clear the browser cache – otherwise you might not notice the changes.

On hover, I would like the menu links to change to white (on the red background). There is not an option to change text color on hover in the advanced styling Menu Icon / slide out feature.

I added this code to change the hover color:
```
.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a:hover {
    color: #ffffff;
}
```
Best regards,
Dude
August 10, 2018 at 9:12 pm #996147
raisonbrands
Participant
Great thank you so much! All looks good except the code you used to increase the logo size

I also centered and increased the logo image with this code:
```
.responsive #top #wrap_all #header #header_main .inner-container .logo {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    min-height: 100px;
}
```
That only made the header taller but didn’t increase the size of the logo. The actual logo is a bit larger than how it’s showing up, so I’m just curious how I can get it to appear larger without making the header much deeper. I realize this will decrease the padding around the logo though.

Thank you in advance. I really appreciate it!
August 13, 2018 at 8:03 am #996554
Victoria
Inactive Moderator
Hi raisonbrands,

The code below reduces some vertical padding on the container and so there are about 40px for the logo to grow without pushing the header to be too high.

Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
```
@media only screen and (min-width: 1024px) {
  .responsive #top #header .logo, .responsive #top #header .logo a, .responsive #top #header .logo img {
      max-width: 320px;
  }
  #top #header #header_main .container.av-logo-container .inner-container {
        padding: 0 20px;
  }
}
```
If you need further assistance please let us know.

Best regards,
Victoria
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.