Individual Header Menu

WernerBonhoffStiftung

Hi Guys,

I just bought your theme and now try to get into it and understand how to use it.
I already could figure out some things but with this issue I am not sure.

Right now I am using university as basic template and transparent header with backround image (http://s0.nachdertat.de/).
Is it possible to set the position of the menu (and / or logo) individually so it is situated in the green part of the header image?

Also is it possible to add text elements to the header or do I have to include in the background image?


Best Stefan

Bryan

Hi,

You cannot do that. Both cases.

If you are new to the theme you should really take a look at those links

Documentation:

http://themes.muffingroup.com/betheme/documentation/#general

List of shortcodes and items:

http://themes.muffingroup.com/be/splash/

Videos:

https://www.youtube.com/user/muffingroup/videos

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WernerBonhoffStiftung

Hi Guys,

thanks for your reply. I will do so but I had already checked header section and at least couldn't find that it is not possible. Thats why I asked.

I managed to do it with a background image and a transparent menu which I moved via custom css.
Since I could not do it with another kind of menu I wonder if it is possible to style the transparent menu like in the picture (coloured buttons with color change when active)? 

If so could you provide me the css code?

Best Stefan 

Bryan

Hi,

You can set the style of the menu to hover in theme options>menu&submenu>menu and select the style.

The colors can be changed in theme options>colors

Hope this helps

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WernerBonhoffStiftung

Hi Guys,

we are getting closer.

As said menu style is transparent. With option "highlight" I was able to highlight the active menu item.
I can also change colour for the whole top bar but not for the menu only.

So in the end I need to have a button "behind" each menu item which is grey with white borders. When hover over or active grey turns to red.Is that possible via CSS code? If so please point me in the right directions.

Thanks and have a nice weekend.

WernerBonhoffStiftung

Ok I managed to color the menu wrapper in grey. Is this the right idea? If so I would need to change size of wrapper.

Or is it possible to colour the area with the menu items (if I inspect the element its says <span>Our impact</span> for example and this is 110x50px) only?

Bryan

I dont understand, what do you mean by: is it possible to colour the area with the menu items

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WernerBonhoffStiftung

As you can see right now the menu_wrapper is coloured in grey.
So best way would be to decrease size meaning crop the yellow coloured edges (picture below). Right know menu wrapper and menu items are 90px high and I would like reduce it to 50px.

So maybe you can tell me if this is possible first otherwise it gets to confusing.

Bryan

Use this css

.menu-highlight:not(.header-creative) #Top_bar .menu > li > a {
    margin: 0 !important;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WernerBonhoffStiftung

Cool so we are nearly done but I have some more questions:

1. I managed to put a white border around it. If I can see it properly there is a grey divider between each menu item. Do I change the color in the theme options? If so which one? Or is it via custom css and if so what is the code?
   
2. If I hover over the menu there is still a small grey part left maybe because the "button" has a round shape? Is it possible to adjust this so the red color covers the menu item when hovering over?
3. I set the position of the menu via css. Will this work with resonsive as well?

#Top_bar { top: 90px !important; }

#Top_bar:not(.is-sticky) {

        top:185px !important;

        left: 400px !important;

Thx Stefan

Bryan

1.

#Top_bar .menu > li > a span:not(.description) {
   border:none !important;
}

2.

@media only screen and (min-width: 1240px) {
.menu-highlight:not(.header-creative) #Top_bar .menu > li > a {
    border-radius: 0;
} }

3. It should be, havent you checked?

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

WernerBonhoffStiftung

I have testet it and it is not working.
Menu just disappear when screensize is 1024x768 or smaller. Also the background picture in the header does not resize.

So if this is getting to complicated I think I have to try a different way (see my other post with resize logo in stack center).

Bryan

Did you try to change the responsive menu initial width.

Go to theme options>responsive>header and set the initial width options

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next