Docs

[michaellanfield]

http://thevegansandwich.com

I would like to create one container around the top logo and menu so that when someone views the menu/logo on computers/devices with more narrow screens, both the logo and menu move. So far only the menu moves and when the screen is very narrow the menu goes underneath onto my background and under the logo which doesn’t look good. I would like to have it just like the following site. I am attaching a screenshot as my site is under construction. http://theme.co/x/demo/renew/2/

[Paul R]

Hi,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

@media (max-width: 1200px) {
body .x-nav-wrap.desktop {
    display: none;
}

body .x-btn-navbar {
    display: block;
    float:right;
}

body .x-nav-wrap.mobile.in {
    display: block !important;
}
}

You may change 1200px to adjust when your mobile menu will appear.

Hope that helps.

[michaellanfield]

I am not sure. added it in and changed the number (1200) around but doesn’t seem to work or even create a container around the logo and menu. 🙁

[Rupok]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[michaellanfield]

This reply has been marked as private.

[Christopher]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Please find this code:

.admin-bar .x-navbar {
    top: 32px;
    height: 66px;
}

And update it to :

@media (min-width:979px){
.admin-bar .x-navbar {
    top: 32px;
    height: 66px;
}
}

Hope it helps.

[michaellanfield]

I tried doesn’t work. Basically, like I mentioned whenever I take my browser and make my screen narrow, to test it out on smaller screens the menu goes below the logo. The logo does not move with the menu. On the site http://theme.co/x/demo/renew/2/
you have a container around the logo and the menu so they move at the same time.

<div class=”x-container max width”>

[Nico]

Hi There,

Try adding this in your customizer’s custom CSS:

.masthead-inline .desktop .x-nav{
float: none;
}

If still some other menus are goind down, adjust the the font size and padding-left of your menu depending on the screensize. For example

@medie(max-width: 979px){
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce){
padding-left:10px
font-size: 16px;
}}

adjust the screensize and the CSS achieve the best look depending on screensize.

Hope it helps.

Let us know how it goes.

Thanks.

[michaellanfield]

I don’t know. Doesn’t look good on mobile devices

[Friech]

Hi There,

Basically, we need to adjust the gap between your menu items when the screen gets narrow. But some of your custom css is hurting the navbar.

This custom css is giving the last menu item (media) a very large padding on the right? I think you add this css to center the menu.

.x-navbar-static-active .masthead-inline .desktop .x-nav > li:last-child > a, .x-navbar-fixed-top-active .masthead-inline .desktop .x-nav > li:last-child > a {
    padding-right: 245px;
}

And this code is giving the logo a large left margin, adding an unnecessary width.

.x-brand img {
    width: 67px;
    margin-top: -52px;
    margin-left: 200px;
}

Would you mind wrapping those custom css that is specific for desktop view with this @media query block? So the mobile view wont be affected.

@medie(min-width: 1200px) {
/*CUSTOM CSS HERE*/
}

Or If you don’t mind restore your header to default and lets center the logo and the menu in different way.

Thanks.

[michaellanfield]

I tried everything. It seems the menu and logo container moves with the other main content and footer container. I would appreciate if you could figure out how to manually create a separate container for the top menu and logo. Then I could probably figure the rest out. Thank you.

[Rue Nel]

Hello There,

I am another staff checking on this topic. When I login to your site, I am seeing this:

For the meantime, please make sure that you have set your logo and menu position as inline. You can check this setting in the customizer, Appearance > Customize > Header > Logo and Navigation and make sure it is set to inline. Setting it stacked makes use logo and menu with different container.

Hope this helps.

[michaellanfield]

I am not sure, I login okay and so the others tech supports at themeco. Yes it is set to inline.

[Christian]

Hey Michael,

Another support member here. I could login to your site. However, manually creating a separate container for the top menu and logo requires custom development which regretfully falls outside the scope of our support. Also, since we have given code recommendations and those didn’t work, I recommend that it would be best if you will work closely with a web developer in your area or a web developer who offers live support. We love to help each and every person beyond the scope of support but we have to draw a line somewhere.

Thank you for understanding.

[Author]

Posts