Navbar css stopped working

Support
#1

Hello,

I was provided the following css to fix the navbar on web site, rediresuts.com:

Thanks for asking. :slight_smile:

You can add following CSS under X > Launch > Options > CSS:

.x-navbar .x-container.max.width {
max-width: 100%;
width: 100%;
}

.x-navbar .x-brand {
margin-left: 30px;
}

It worked for a while and just stopped working again.
Can you please take a look at it and tell me what needs to be fixed?
Thanks

Jane

#2

Hi @janequade,

Thanks for writing in.

I would like to check site however it is not working.

Try to check if you have closed it properly or there is an extra brackets to your code that causes your CSS not to work.

Let us know how it goes.

THanks.

#3

I spelled the site wrong
rediresults.com

#4

Hello @janequade,

Thanks for asking. :slight_smile:

It looks like you are using Ubermenu. You can add following CSS:

.ubermenu-main {
    margin: 0 30px;
}

Thanks.

#5

so do i delete the original css code i sent you in the original message before i add the new code?

Jane

#6

i added the following css and it did not work.

.ubermenu-main {
margin: 0 30px;
}

#7

Hi Jane,

Would you mind clarifying how the header is supposed to look like? Are you try to eliminate the space on the left and right of the header and make it fullwidth?

If so, you will have to use this CSS:

.ubermenu-main {
    margin: 0;
}

In case you are trying to do something else, kindly let us know so that we can provide you with some suggestions.

Hope this helps.

#8

Yes - I am trying to eliminate the space on the left and right of the header and make it full-width,

Added css but it did not work.

#9

Hi There,

To achieve that, please add this custom CSS under X > Theme Options > CSS:

#ubermenu-main-344-primary-2 {
    background-color: #ffffff;
    background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#dbdbdb));
    background: -webkit-linear-gradient(top,#ffffff,#dbdbdb);
    background: -moz-linear-gradient(top,#ffffff,#dbdbdb);
    background: -ms-linear-gradient(top,#ffffff,#dbdbdb);
    background: -o-linear-gradient(top,#ffffff,#dbdbdb);
    background: linear-gradient(top,#ffffff,#dbdbdb);
}

And change the Position & Layout > Menu Items > Horizontal Item Alignment option to center:

Hope it helps :slight_smile:

#10
  1. I added the css code as instructed.
  2. I have no idea what Menu Items you are referring to.

Where do i find Position & Layout? I did not see it under Theme Options.

#11

I found the Horizontal Item Alignment and changed it to Center.
The menu items are now centered on the navbar but I want it justified, or spread out across the entire navbar, evenly spaced. Not sure what the correct terminology is.

Please see attached screenshot.

#12

Hi There,

Please add this to Theme Options > CSS

#ubermenu-main-344-primary-2 ul.ubermenu-nav > li.ubermenu-item{
    width:16%;
    text-align:center;
}

Read the documentation here for more details.

Cheers!

#13

Thanks.
Worked like a charm!

#14

I copied all the css code over to this site
my.rediresults.com and it’s not working
can you please check it for me?

same credentials as rediresults.com

#15

Hi there,

Using the code previously suggestion would most likely not work because it is specific to the setup of the site you linked.

If you want to have the menu items for my.redireuslts, try this CSS:

#ubermenu-main-346-primary-2 ul.ubermenu-nav > li.ubermenu-item{
    width:25%;
    text-align:center;
}

Hope this helps.

#16

Hi Jade,

I added the css above.
Here is how it looks now. (see attached screen shot)
and this is after i log in as a user.

Jane

#17

Hi there,

Please update

width:25%;

to

width:10%;

Hope this helps.

#18

There are 2 menus affected by the above css.

  1. uber menu when NOT logged into the site
  2. uber menu logged in as a user

when I change percentage from 25 to 10, the menu visible when logged in looks great (see attachment) but the menu when NOT logged in is messed up again (see other attachment)

LOGGED IN

NOT logged in
.

#19

Hi Jane,

In that case, please use this code instead:

#ubermenu-main-346-primary-2 ul.ubermenu-nav > li.ubermenu-item{
    width:25%;
    text-align:center;
}

.logged-in #ubermenu-main-346-primary-2 ul.ubermenu-nav > li.ubermenu-item{
    width:10%;
}

Hope this helps.

#20

the new css did not help on my.rediresults.com
navbar menu items are on two rows for both logged in users and non logged in users.

It’s also not working on this site either
rediresults.com
same issue - 2 lines of menu items in navbar