Docs

[ImpulseDev]

Hi Guys, wanting to recreate the header on this site.

all I can think is a lot of custom CSS to make this happen. Help will be greatly appreciated.

https://www.justforlovephotography.com/

[Christopher]

Hi there,

To add logo between menu items, follow this thread https://theme.co/x/member/forums/topic/making-logo-be-in-the-middle-of-the-nav-bar/#post-161784
Please set up a slider below masthead, we’ll help you to make navbar transparent.

Hope it helps.

[ImpulseDev]

This reply has been marked as private.

[ImpulseDev]

also having the slider in the header doesn’t fill the “Full Screen” Feature.

[ImpulseDev]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

1. You wish to overlay it on home page only? I’m not sure about 1500px, would you mind providing more details?

2. The slider is fullscreen, but it’s pushed a bit by top bar height. Go to your slider settings and find Containers input field and add .x-topbar

3. You can use Essential Grid plugin and add it under your slider.

Cheers!

[ImpulseDev]

If you take a look on that page after it goes below 1500px wide the menu starts over lapping and expanding the size of the menu.

[Christopher]

Hi there,

Please update this code :

@media (min-width: 980px){
.x-navbar .desktop .x-nav {
    padding-top: 30px;
    padding-left: 130px;
    text-align: center;
}
}

To :

@media (min-width: 980px){
.x-navbar .desktop .x-nav {
    padding-top: 30px;
    text-align: center;
    display: table;
    margin: 0 auto;
}
}

Hope it helps.

[ImpulseDev]

Unfortunately, the CSS that you’ve given me hasn’t worked.

I’ve attached a screenshot of the issue.

[ImpulseDev]

This reply has been marked as private.

[Christopher]

Hi there,

You need to reduce navbar font size and image width to fix the issue.
If you check example site and resize your window in, the same thing happens in certain screen size.

Thanks.

[ImpulseDev]

Hi Chris, how can I center the nav?

[Christopher]

Hi,

Please update this code :

.x-navbar .desktop .x-nav {
    padding-top: 30px;
    text-align: center;
    display: table;
    margin: 0 auto;
}

To :

.x-navbar .desktop .x-nav {
    padding-top: 30px;
    text-align: center;
    display: table !important;
    margin: 0 auto;
}

Also there is a missing curly bracket in your code, find this code and close curly bracket :

@media (min-width: 980px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 500px;
        height: 300px;
      margin-top: -115px;
      margin-bottom: -60px;
    
        background: url(http://aitphotography.impulseink.com.au/wp-content/uploads/2016/09/AT.png) no-repeat center center;
        background-size: contain;
      
  }
  

Hope it helps.

[Author]

Posts