[Resolved] generate_menu-bar-item to the left side?

[Heinrich]

hi team,

how can i position a generated menu bar item to the left side of the menu? found nothing in the docs.
tks in advance.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Heinrich]

hi leo, of course it is. additional i send you a screenshot how it should be. the blue block is already fine, but how to move the logo to the left. its a block hooked in the menu too.

or do you think it`s better to work with “normal” logo functionality? thought on this too, but see difficulties to go outside the menue area so far.

curious to your advice. tks in advance.

[David]

Hi there,

why not simply add the Logo to the Site Identity ?
Then make sure to enable Navigation as Header in the Customizer > Layout > Header.
May require a little CSS to size it and create an overlap if necessary – and we can help with that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Heinrich]

hi david,
will do it in the advices way.
but nevertheless the question if it is possible to bring something on the left side? and of course how?

[David]

The menu bar item hook has its own container. So any elements you hook into there will have to be beside each other.

Instead you could use another hook – such as the inside-navigation hook – this will place it before the menu.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Heinrich]

hi david, logo is in the header now, can you please advise me how to create the overlap? the logo should be 270px, mobile of course smaller than that.
tks in advance

[Heinrich]

hi david, any chance to get info within this shift….?
tks in advance.

[David]

Sorry your last reply seemed to have slipped past our system. Try this CSS:

@media(min-width: 769px) {
    #site-navigation {
        position: relative;
    }
    
    .site-logo a {
        position: absolute;
        top: 0;
    }
    .navigation-branding img {
        height: 270px;
        width: 270px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Heinrich]

hi david,
tks for advice, is working fine.

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts