Changing Size of Menu and Subheader

stevenmichael · February 2015

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

Albert · February 2015

This should be possible but please drop us url to website where you want to do it.

stevenmichael · February 2015

http://www.stevenmichaelphotographyandart.com

Sorry, I meant to do that.

Albert · February 2015

The url you sent does not work. Do you have other url that works?

stevenmichael · February 2015

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.

Albert · February 2015

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.

stevenmichael · February 2015

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?

stevenmichael · February 2015

Figured it out. I used #Subheader .title { display: none; }

Now, can I change the menu line color without changing the Header background?

Albert · February 2015

The css you posted for title is of course properly. About menu line, please show us on screenshot which line you mean exactly.

rrrrragazzo · September 2018

Question:

Where can I find this CSS-file where I can put #Subheader { padding: 20px 0; } to change the height of Subheader ?

Pablo · September 2018

Hi,

You can paste it in Theme Options > Custom cSS & JS > CSS

Thanks.

rrrrragazzo · September 2018

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.

Screenshot

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

Pablo · 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

rrrrragazzo · September 2018

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"

Pablo · September 2018

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.

rrrrragazzo · September 2018

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.

Pablo · September 2018

This header red background can be changed in

Theme Options > Colors > Header

http://prntscr.com/kronqa

And after this, just insert this CSS code to move it down a little bit.

Header#Header{
	height:275px !important;
}

Thanks

rrrrragazzo · September 2018

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.

rrrrragazzo · September 2018

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?

Pablo · September 2018

It's the header indeed, but there is a header_wrapper too.

http://prntscr.com/ksl3zg

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.

rrrrragazzo · September 2018

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_wrapper" transparent, 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.

Bryan · September 2018

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.

rrrrragazzo · September 2018

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

Bryan · 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.

rrrrragazzo · September 2018

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

Bryan · September 2018

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.

rrrrragazzo · September 2018

... 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

Bryan · September 2018

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

rrrrragazzo · September 2018

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:

http://moebel.org/cms/cms-07.jpg

Can I configure that somewhere / somehow? ?

Bryan · September 2018

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;
	
}

rrrrragazzo · September 2018

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)?

Changing Size of Menu and Subheader

Comments