Fixed Right Nav - Submenu custom css

Support
#1

Hi folks, I rarely use submenus in a fixed right nav, but I was wondering if someone could help me style the submenus for the nav link to “CHAT” to match the main navigation links? Ideally I want them to expand down, within the fixed right header width - transparent background, one on top of the other, left aligned, like the rest of the menu.

Also, the secondary links drop down on mobile view (good) but seem to have padding on the left, so are not center aligned like the rest of the mobile menu. Anyone knows what gives?

Thanks ever so much!

#2

Hi,

To achieve that, you can add this in Theme Options > CSS (global css)

.x-navbar .mobile .x-nav ul {
    margin: 0;
}

.desktop .sub-menu {
    box-shadow:none;
    background:transparent;
    position:static;
    padding:0;
    width:100%;
}

.desktop .sub-menu li a {
    font-size: 20px;
    outline: none;
    padding-left: 7%;
    padding-right: 7%;
    font-family: "IM Fell Great Primer SC",serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

For future reference, I came up with this code using chrome inspect element.


Hope that helps.

#3

Hi Paul! That certainly helped the mobile alignment (thank you!)

But the desktop is still the same - any clue as to why? Weirdly, when I tweak the setting in chrome inspect element, it works, but isn’t implemented from custom css within X…

#4

Hi there,

These codes should work for the desktop sub menu but did not work because there seems to be a CSS error in the code you have in the custom CSS.

Kindly copy and paste the entire code you have in the custom CSS here and it should give you information about the CSS errors.

Hope this helps.

1 Like
#5

#menu-wjm li a {
text-align: left;
}

@media (max-width: 767px){
.masthead-inline .x-btn-navbar {
display: block;
float: none;
clear: both;
width: 50px;
margin: 10px auto 0;
}

.x-navbar {
overflow:hidden;
padding-bottom:30px;
}

.x-navbar-inner {
text-align:center;
}

.x-navbar .x-brand {
float:none;
}

.x-nav-collapse .x-nav {
text-align:left;
}

@media (max-width: 979px) {
.x-btn-navbar {
color: #000000 !important;
background-color: transparent !important;
}
}

h1, .h1, h3 .h3 {
line-height:1;
}

@media (max-width: 420px) {
.x-brand img {
width: 300px !important;
}
}

.x-navbar .mobile .x-nav ul {
margin: 0;
}

.desktop .sub-menu {
box-shadow:none;
background:transparent;
position:static;
padding:0;
width:100%;
}

.desktop .sub-menu li a {
font-size: 20px;
outline: none;
padding-left: 7%;
padding-right: 7%;
font-family: “IM Fell Great Primer SC”,serif;
font-style: normal;
font-weight: 400;
letter-spacing: 0.085em;
text-transform: uppercase;
}

#7

Hi there,

Please update it to this:

#menu-wjm li a {
    text-align: left;
}

@media (max-width: 767px){
	.masthead-inline .x-btn-navbar {
		display: block;
		float: none;
		clear: both;
		width: 50px;
		margin: 10px auto 0;
	}

	.x-navbar {
		overflow: hidden;
		padding-bottom: 30px;
	}

	.x-navbar-inner {
		text-align: center;
	}

	.x-navbar .x-brand {
		float: none;
	}

	.x-nav-collapse .x-nav {
	 text-align:left;
	}
}

@media (max-width: 979px) {
	.x-btn-navbar {
		color: #000000 !important;
		background-color: transparent !important;
	}
}

h1, .h1, h3 .h3 {
 line-height:1;
}
  
  @media (max-width: 420px) {
    .x-brand img {
        width: 300px !important;
    }
  }

.x-navbar .mobile .x-nav ul {
    margin: 0;
}

.desktop .sub-menu {
    box-shadow:none;
    background:transparent;
    position:static;
    padding:0;
    width:100%;
}

.desktop .sub-menu li a {
    font-size: 20px;
    outline: none;
    padding-left: 7%;
    padding-right: 7%;
    font-family: "IM Fell Great Primer SC",serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

Hope this helps.

1 Like
#8

SUPERSTAR - it looks perfect! now the only remaining thing is that if I have NAVBAR SEARCH active, when you hover over CHAT on desktop, and try to move the mouse down to ‘Register’…the CHAT collapses and you can’t actually select it. 10 points to you if you can help? After removing the search function, the issue goes away, but it would be great to have the search function on the site…

#9

Hi There,

Please add the navbar search so we can better understand the issue.

Thank you

#10

I’ve added that back on now so you can see what I mean.

#11

Hi there,

Looks like you removed it again. How about providing your login credentials so we could add it and remove it after testing? You should provide your credentials in a secure note.

Thanks!

#12

Hi Rad - sorry, I removed it because there were a few hours of no response but happy to add it back on! Just trying to limit the exposure to issues for visitors ; )

It’s back on so you can see what the issue is (desktop)

#13

Hello @Nayfe,

I don’t see navbar search on the website. As of now I can see logo, menu items and cart icons. Have you removed it again? I would like to let you know that we answer ticket from oldest to newest. So it may take some time for us to respond back as we are resolving tickets in chronological order. Can you please add again and update the ticket?

Thanks.

#14

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