Help with styling please for Topbar & Navbar when viewed at a smaller screen size!

Support
#1

Hi, I’m hoping you’ll be able to help me with some CSS for restructuring the topbar and nav bar when viewed at a smaller size please! I’ve managed to get so far with it but now I’m stuck! If you view the 480px & smaller screen size option, you’ll see that the topbar is a bit of a mess! Instead of trying to describe how I’d like it, I’ve done a mock up to show you if that’s ok.

I’ll put the URL in a secure link as it’s being built on a temp link.

Thanks!

#2

Hi @core365,

Thanks for reaching out.

It’s due to mixed of custom stylings and flex, first make sure this CSS is only applied to desktop or larger screen

.x-topbar-inner {
    display: flex;
}

Like this

@media ( min-width: 980px ) {
.x-topbar-inner {
    display: flex;
}
}

Then group your existing styling with @media query to each device. Example, this CSS is okay

@media (max-width: 399px) and (min-width: 321px)
.x-topbar .p-info {
    font-size: 16px;
    line-height: 20px;
    height: 80px;
}

But the rest of CSS are applied regardless of device

.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: -8px auto;
    font-family: "Roboto",sans-serif;
    float: right;
    margin-right: 30px;
    background-color: #000000;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 13px;
    border-radius: 0;
    line-height: 1.4;
    border-radius: 0 0 0px 25px;
}

Creating misalignment on smaller screen. Once I removed the float and right margin, it started to look like that. Then what’s left is just add top spacing for social icons and positioning the menu icon. Another cause is this CSS

.x-topbar {
    position: fixed;
    width: 100%;
    min-height: 37px;
    height: 37px;
    text-align: center;
}

Which then affects the logo and menu positioning. The CSS are all mixed up so I can’t really provide a fix-it all CSS, please start from these first :slight_smile:

Thanks!

#3

Hi, that’s great, thanks! I’ve got the header area looking how I want it now on the smaller size screen, but there are a couple of things I’m hoping you’ll be able to help me out with please!

If you set the screen size to 480px & smaller and then please see the list below:

  1. When you click on the blue nav button, the logo and the blue nav button disappears!
  2. When you click on the blue nav button, the white background doesn’t stretch all of the way down behind all the page names - the ‘Contact Us’ is on top of the slider
  3. If you click on one of the other pages eg Towbars, the slider has moved to the top of the page whereas it should be showing below the navbar! The Home page is correct, but all of the other pages are displaying the slider in the wrong position.

Thanks!

#4

To fix 1 and 2, please add this code in Theme Options > CSS.

.ubermenu-main {
    display: inline-block;
}

Can you give us more details and screenshots about #3?

Thanks.

#5

Hi, that’s great, thanks for the fix for 1 & 2!

For 3, if you view it at the mobile screen size, then click the blue navbar button and click on ‘Towbars’. The image at the very top is a slider and should appear under the navbar and above the blue text on the black background ‘Towbars’.

Here’s a screen grab of what you see which is incorrect:

Thanks!

#6

Hi @core365,

I’m sorry but it’s really hard for us to formulate a custom CSS with the current customization you have on the header (including the topbar), are you fine styling your header from scratch? That above slider should not be there if you just want a background-image in the header. Please remove it, and use the background-image CSS property for adding background on the header instead.

Then navigate to Theme Options > Header and set the Navbar Top Height that is enough to accommodate the logo bar and navbar, maybe around 215 adjust as you see it fits.

Perhaps set the LOGO AND NAVIGATION > LAYOUT to Stacked as your navbar and logo bar cannot be inline, your navbar is just too long.

Lastly, remove all the custom CSS that is applied to the header (including in topbar), since there will be no above slider anymore.

We will provide custom CSS (if needed) after you’re done doing the above points, but not a CSS for fixing your current CSS applied, that will just lead to a more responsive issue.

Thanks,

#7

Hi, I chose not to have background images as headers due to the amount of pages on the site which use the same one, so it was easier to set up a slider and then if the picture needed to be changed at any point, I just had to do it in the one area and it would apply to all the associated pages.

Thanks but I’ve sorted it anyway!

Cheers!

#8

No problem.
If you need anything else we can help you with, don’t hesitate to open another thread.

#9

Hi,

I’m just trying to get some better spacing on my site for a new logo and the nav links.

Any advice?

http://campisilaw.com/

#10

Hello Ben,

Thanks for updating this thread.

Please be advised that by default, the logo is positioned to the left side and the navigation is positioned to the right side of the header.

For the spacing of the logo and the nav links, please go to X > Theme Options > Header > Logo - Alignment > Navbar Top Logo Alignment and in X > Theme Options > Header > Links - Alignment > Navbar Top Links Alignment.

Hope this helps.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.