Individual Header Menu

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.
imageimage
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?
image

Best Stefan

Comments

  • Hi,
    You cannot do that. Both cases.
    If you are new to the theme you should really take a look at those links


  • 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?image

    Best Stefan 
  • 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
  • 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.




  • edited March 2017
    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?

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

    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.

    image
    So maybe you can tell me if this is possible first otherwise it gets to confusing.
  • Use this css
    .menu-highlight:not(.header-creative) #Top_bar .menu > li > a {
    margin: 0 !important;
    }
  • 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


  • 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?
  • edited March 2017
    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).
  • Did you try to change the responsive menu initial width.
    Go to theme options>responsive>header and set the initial width options

    thanks
Sign In or Register to comment.