[waldjunge]

Hi,

first of all, thanks for this great theme. I like it a lot and I’m realy happy with it. But I have one small problem with the menu.
Tried to get the menue sticky, worked more than les fine, but then I checked for several Browsers on https://www.browserstack.com/screenshots
I saw the code I’m using is just working fine in modern browsers. IE 9 and lower makes a lot of trouble.

This is the code I’m using at the moment (also checking screen width, cause sticky on mobile makes no sense to me):

@media screen and (min-width: 800px) {
/* Menü on top */
.hgroup-wrap{
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
}

Does somebody have an idea, how to optimize the css?

An other thing is the width i am struggling with of the hgroup-wrap. I set it to 100% to have full width at the moment. But what I would realy like is to have it in the same width than the content area.
Assigning a pusition absolut and margin left and right to 0 doesn’t bring the expected result, because it seams the hgroup-wrap is not directly assigned to the main content box.
What I would realy love to have is a sticky header like on this page: http://www.heilpraxisnet.de/ Is this possible with this theme?

The link to my page with the actual css is http://www.b-scheidt.de

Thanks a lot and regards!

[Theme Horse Support Team]

Hi Waldjunge,

Please follow this link https://www.themehorse.com/support-forum/topic/fixed-non-scrolling-menu/#post-36525

Thank you!

[waldjunge]

Hi, thanks for your reply.
This code works fine if I go to Appearance > Customize > Ambition Theme Options > Sity Layout and select Wide Layout. But what I have selected there is the Narrow Layout. In this case the width: 100%; option makes some trouble. Would it be possible to get an optimized css for the Narrow Layout stile?

This would be realy great!

Thanks a lot un advance

[Theme Horse Support Team]

Hi Waldjunge,

You can try below CSS code. Go to Appearance > Customize > Ambition Theme Options > Custom CSS and paste the following CSS code in the field and Click on Save & Publish button:

.narrow-layout .info-bar {
    position: fixed;
    width: 1230px;
    z-index: 100;
}
.narrow-layout .hgroup-wrap {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 34px;
    width: 1230px;
    z-index: 100;
}
@media only screen and (max-width: 1290px) {
	.narrow-layout .info-bar,
        .narrow-layout .hgroup-wrap {
		width: 964px;
	}
}
@media only screen and (max-width: 1023px) {
	.narrow-layout .hgroup-wrap,
        .narrow-layout .info-bar {
		width: 708px;
	}
}
@media only screen and (max-width: 767px) {
	.narrow-layout .hgroup-wrap,
        .narrow-layout .info-bar {
		width: 300px;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.narrow-layout .hgroup-wrap,
        .narrow-layout .info-bar {
		width: 460px;
	}
}
@media only screen and (max-width: 767px) {
        .narrow-layout .hgroup-wrap {
                top: 0;
        }
}

Thank you!

[waldjunge]

Works realy great, thank you!

[Theme Horse Support Team]

Hi waldjunge,

Could you also please help us rating this theme in WordPress Repository.
https://wordpress.org/support/view/theme-reviews/ambition
We really appreciate your rating.

Thank you!

[Author]

Posts