Changing Size of Menu and Subheader

I would like to change the height of the menu and sub header.  Is that possible?


«1

Comments

  • This should be possible but please drop us url to website where you want to do it.
  • The url you sent does not work. Do you have other url that works?
  • Sorry, at the same time I was downloading a demo and now it's all messed up.  It looks completely different than I had it set up for.  But URL is working now.
  • We know about this problem with menu items that shows at the top and bottom. But to remove those 
    menus at this moment, please go to Appearance > Menus > Manage locations section and remove all additional menus.

    But to change subheader height, please use below css:
    #Subheader { padding: 20px 0; }
    About menu, will be great if you can drop us a screenshot of what you mean because for us menu looks perfectly and we don't know what you exactly want to do.

  • Thank you!  When I downloaded the demo, it deleted the custom CSS I had put in.  Can you tell me what to add to delete the page title on the submenu?
  • Figured it out.  I used #Subheader .title { display: none; }

    Now, can I change the menu line color without changing the Header background?
  • The css you posted for title is of course properly. About menu line, please show us on screenshot which line you mean exactly.
  • Question: 
    Where can I find this CSS-file where I can put  #Subheader { padding: 20px 0; } to change the height of Subheader ?




  • Hi,
    You can paste it in Theme Options > Custom cSS & JS > CSS
    Thanks.
  • thanks, 
    that doesn´t help, it doesn´t change nothing. 
    I would like to make smaller / lower or delete the row which is under the menu-row. 


    That row is a real horror, I am fighting the whole day with this horrible shit


     
  • edited September 2018
    Try to use this, fixed code
    #Subheader { padding: 20px 0 !important;  }

    Also, there is setting in Theme Options > Header & Subheader > Subheader to change a subheader padding http://prntscr.com/kr75xm

    Thanks
  • Thanks,
    I also with this command, the line is still too high and on mobile phone, the height even doubles (!) as soon as I insert a picture there! 

    A horrible system of settings in that theme, as a layman I struggle with this line already for days, and no one has a solution. 

    I also tried to hide or disable this line, is also not possible.

    Is that line (in red) the header or subheader?  

    See on "moebel.org/cms"
  • Please, tell me, how it supposed to look like.
    Also, your menu have to many items and it will not fit on HD resolutions.
    Please create menu item with submenus.

    Also, change a header to classic for a test.
    And it's header, not subheader.
    Thanks.

  • It's header? 
    Which one? 
    Where are the settings to change or remove it? I am searching already 3 days. 

    The command itself - which I've inserted - works on the header, means  without a "sub" in it (#Header {display: none;! Important;}), the header disappears, but I do not want to remove the header, there is the menu in it, not possible to remove that.     

    I switched now to "classic" nothing changes at all, 
    only the menu above is no longer fixed (it always scrolls up and then it comes back down, because "sticky"). But the red part (row) is still there and much too high. 

    In the menu items is already a submenu. 

  • This header red background can be changed in
    Theme Options > Colors > Header

    And after this, just insert this CSS code to move it down a little bit.
    Header#Header{
    height:275px !important;
    }
    Thanks
  • Thanks Pablo,  

    just checked, this command is good for making it higher, but I can not make it smaller / lower with that. 

    I tried also height 175px and 75px, nothing happens, it remains high. I also deleted the photo. Nothing changes.   

    The background  colour is not the problem at all, I know how to change it. The height of that red row is the problem. 

  • That red row line should be a header (or "the" header), not subheader? 
    And why it is still visible if I switch off the header with CSS?

    I did for a test:   
    #Header { display: none; !important;  } 

    And why is the red line (which should be a header) still there if i switch off the header? 
    It can not be the header, because the header is switched off, and it is off, the menu is gone, but the red row is still there. 

    Screenshot: 
    moebel.org/cms/cms_horror.jpg

    So maybe it is not a header an also not a subheader? 

  • edited September 2018
    It's the header indeed, but there is a header_wrapper too.

    This red color is in header_wrapper.
    If you want to have transparent header, please go to Theme Options > Global > General
    http://prntscr.com/ksl4jo - tick this option on.

    Do you want get rid of red stripe or just delete whole header?
    Cheers.

  • Thanks, 

    i did it, that makes the "header_wrapper" transparent, but it's still there and especially on smartphones it makes a Problem.  

    On the smartphone it pushes the main page far down and there is a large part empty, apparently this is the "header_wrapper" which is now transparent.   

    This "header_wrapper" is extremely poorly described in the menu of BeTheme, the word "wrapper" I can not find there at all. 

    It is also completely unclear how one can write something there or how this content gets there (I read in there "Home" and I can also see which link is active).  

    I can make that "header_wrappertransparent, but I can not hide or delete it, and the CSS command for changing the height (which I got from you) does not show the slightest impact. Nothing changes. The problem is still the same.  

    That thing is the sheer horror, unbelievable.

  • Hello,
    we understand that the header and header style/sizes may be complicated at first but when you get the hang of it, it gets quite easy.

    Please do this:
    1. Disable all custom css. Remove it from theme options and paste it somwhere else for the time we check.
    2. Send us a link to the page in question.
    3. Explain, best in screenshots, what do you want to achieve, so we know how to help. We cannot help you with an issue when you constantly change everything.

  • There is no CSS code anymore. 

    the page in question is moebel.org/cms

    screenshot visible here: 
    moebel.org/cms/cms-02.jpg 

    the red line / row (that "header_wrapper" which is transparent now), I do not want the wrapper transparent, I want to remove / to delete / to hide it completely.  That horror makes only problems, it is impossible to find in the settings 
  • edited September 2018
    Please go to theme options>header&subheader>header and change the minimalist option to:
    "minimalist without header space"
    This should fix your problems.

    You can ofcourse disable the transaprent option. You do not need it.
  • Thanks, 

    with this setting, the line on the PC disappears, but the problem is still the same on the smartphone. 

    Screenshot: 
    moebel.org/cms/ff.jpg
  • You can enable the minimalist option also for the mobile. You will find it in theme options>reposnive>header.

    Yes, the line will dissapear because the header will not have any height so the content goes under it.
    Then it is best to add more padding to the top of your subheader, so it will go lower and be visible.
  • ... if you mean this one here, it doesn´t work, nothing changes, the "header_wrapper" is still there on a smartphone

    moebel.org/cms/cms-06.jpg

  • The header is fine on mobile, the space is created on mobile because of the subheader padding.
    It is somehow fixed in the theme css to 80px, we will fix that in the next update, for now please use this css:

    @media (max-width:767px) {
    body.minimalist-header-no #Subheader {
    padding: 20px 0 !important;
    }}
    You can decrease the value to 0
  • Thanks Bryan, 

    it looks better now  :-)  but  the setting still causes problems with different monitors in different resolutions,

    I work for example with an external monitor, which needs resolution 1024 x 768 and the theme (or script) cuts off a part of the main page (content) on the top. 

    The same problem exists even if I use the TV as a monitor, I can not scroll all the way up with the main page, as soon as the menu bar at the top doubles (second row, when the number of menu items becomes too high). .

    Screenshot: 
    Can I configure that somewhere / somehow? ? 
  • I understand but this only happens because you are using too many menu items and they simply do not fit. This is why the second row is created and it covers the page. You should keep the menu in one line with the logo.
     The best way to do this is:
    1. Go to theme options>fonts>size&style and change the menu font size to 15 or 16
    2. Ue this css to lower the padding between the menu items


    #Top_bar .menu > li > a span:not(.description) {

    padding: 0 12px !important;

    }
  • Thanks Bryan,  

    the command "padding: 0 12px" makes the smallest space between the menu items? 
    Or is there still an other setting, somewhere? 

    There is still a lot of space, see Screenshot: 
    moebel.org/cms/cms-08.jpg    

    For what stands "12px" in this command?  
    And how many menu items are recommended here (maximum)?

Sign In or Register to comment.