Ceterized logo in floating menu


#1

Hi,

Tried searching, couldn´t find out. My question is, is there a way to centerize the logo inside the menu? In Sydney (or Perth) Pro.

Like this:
(link1) (link2) (link3) (logo) (link4) (link5) (link6)

Cheers in advance.


#2

Hello there,

It has been asked by one of our user a couple of weeks ago. Please see this thread. I hope that would work for you as well.

Regards,
Kharis


#3

Thanks very kindly for the quick reply Kharis!
Looks like a superb tutorial. I will try it out.

  • W

#4

I could do the centering and center align the the menulinks, but the floating menu is too narrow for the logo. Where in Sydney Pro stylesheet is the adjustment for that?

  • W

#5

Hello there,

Please share the link to your site here, so I can take a closer look and troubleshoot it.

Regards,
Kharis


#6

It´s temporarily here

Please, let me know when you´ve seen it and I´ll remove it.


#7

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:1025px){
   
  .site-header.fixed.float-header .header-wrap{
    margin-top: -13px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .site-logo-middle-menu{
    display: inline-block !important;
    height: 80px;
    margin-bottom: 10px;
  }  
  
  .menu{
    display: table;
    width: 100%;
  }

  .menu > li{
    display: table-cell;
    vertical-align: middle;
  }  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis


#8

Kharis, that worked perfectly! Thanks very kindly!

  • W

#9

Kharis, Now that I´ve tested it a bit further I´ve learned that the actual logo is centered on menu, but it is not in center of the page, which creates unsymmetric vibe with the content of the pages, which could only be corrected by having the exact same word lenght in both sides of logo. Also it does not seem to be working with Google Chrome, which tosses the logo on top of the menu texts as the original setup is aimed to do.


#10

Hello there,

The temporary URL of your site is no longer working. Is there any way to see your site?

Regards,
Kharis


#11

I tossed it back there, so you can check it.

Br,
-W


#12

It is symmetric already, if I am not wrong. Please this screencast https://cloudup.com/c2Grp513JOC

> Also it does not seem to be working with Google Chrome, which tosses the logo on top of the menu texts as the original setup is aimed to do.

Which version of Chrome are you using? Could you please take a screenshot of it and upload it to free file hosting service like Google Drive, Dropbox, or cloudup.com and share the link of it here?

Regards,
Kharis


#13

It is symmetric now, that I´ve changed the words so that their lenghts are balancing it in center. If I replace the first word with “home”, it´s off balance.

I don´t know what happened with Chrome earlier, but now it works fine with me again…
By the way… what stylesheet ID controls the opacity of floating menu? I´ve been trying to pinpoint it with chromes dev tools.


#14

Found the stylesheet ID also.

Thanks for your support and help Kharis, appreciate it!

-W


#15

The logo jumping above menu links is apparently caused by dragging the browser window back and forth to test the media query triggers… it does not always update it when dragging upwards and then the logo jumps above the links.

Kharis, that code or yours seems to be working fine. Only problem I find with the menu, is at the moment is between 992 - 1024 pixel widths. Then the menu leaves the header image visible above it. Otherwise works well. Apparently needs some media query tweakink there.


#16

Here is a screen capture of the header image above menu. I made a small white area on top of the header image to avoid this being visible in different screensizes.