More menu items on main menu top level....

theedge

Hi,

I want to add 2 more menu items (Contact being the first) and it has to appear on the top line and not wrap around. And work on mobile (i.e. be responsive).

I can give back end access if required but it was not clear if the Site Admin account was secure or visible when I post.

Ninja

theedge
Hi
At the moment your site has 7 menu items and all are showing in 1 row in PC view there is no issue.
if you will added more item the space is not enough
you can try this code in custom.css file that will reduce the space between the menu item to create more width for new menu items: http://prntscr.com/rtrsm9

@media(max-width:1200px) and (min-width:992px){.navbar-default .navbar-nav > li {
    padding: 0 6px;
}}

theedge

Hi Pankaj,

I will try that. If you make it wider you will eventually see the behaviour. That screenshot indicates that.

Ninja

theedge
Hi
Can i can not see any issue in My PC screen with current view it fit well, you can try my suggestion and check.
there is no other option as its logical width is not enough to fit too many items except you reduce the items size.

theedge

Hi Pankaj,

I turned off all caching including CloudFlare and it appears the custom.css is not getting read. I did as follows:

with this approach in the browser:

and from what I can tell the custom.css is not being read at all? My screen resolution and browser information is as follows:

So what have I messed up here? Happy to give you back end access if needed. As I am going to have to add some additional menu items here and need to solve this.

Ninja

theedge
Hi
The code is correct can you share screen size as I tried it 1080x1920 Full hd screen Google Chrome and it works fine.
http://prntscr.com/s4crke
http://prntscr.com/s4crnd
Also the style code work for the specific screen size http://prntscr.com/s4cs2n

theedge

Hi Pankaj,

You are testing 1080 x .... ;-) and not 1920 x 1080. See below:

Ninja

theedge
Hi
i was showing it for small sizes because in Full HD it work without any codes http://prntscr.com/s4dz2t

theedge

Ninja

That may be so, but I need it to work at this resolution. So what is the fix?

Ninja

theedge
Hi
There is no issue at Full HD so can not give fix when there is no problem
still you can try this code as issue not found my side.

@media (min-width:992px){.navbar-default .navbar-nav > li {
    padding: 0 6px;
}}

theedge

Ninja

See my first post where I showed that the code it is in custom.css. So are you testing against the live site or locally? If you are not testing against the live site then I would ask you to do so and tell me where the issue is.

If necessary I can give you back end access if that makes it easier.

Ninja

theedge
Kindly check all the screenshot from your site not from my local as i do not have your site.
http://prntscr.com/s4dz2t
http://prntscr.com/s4crke
http://prntscr.com/s4crnd
http://prntscr.com/s4cs2n

I checked it again and it looks fine http://prntscr.com/s5q539

theedge

Can you send me a screenshot where you have Chrome in responsive mode with the screen resolution I have highlighted ie 1920 x 1080(not 1080 x 1920) and show me it does not wrap?

Because as you can see from that it clearly does and my native screen resolution is 1920 x 1080(which I suspect yours is not) and so are may clients to the website (with greater screen resolutions in fact)

Ninja

theedge

Hi
Kindly open /tpls/blocks/header.php
find
col-lg-7
and change it with col-lg-9 http://prntscr.com/s6g8a9

theedge

Hi,

There we go much better. Thanks for that.

Ninja

theedge
You are welcome!