I am trying to build a website with multiple sections on one page and have each section listed as a menu item. Ideally, I only want the relevant section underlined when selected or scrolling. Also, how do I keep “home” as a menu item and not have it underlined?

The code I am currently using in the additional CSS is;

#mainnav .current-menu-item {
	border-bottom: 2px solid #d65050;
	color: #d65050;
     font-weight: bold;
}

TIA

I’ve 2 languages, English (LTR) and Arabic (RTL)

When I choose the Arabic language the website mirrors because its RTL and this is perfect.

only the items inside the Main Nav doesn’t mirror

The CSS needs to be

#main-nav > ul > li {
    float: left;
    padding: 0 8px;
}

when using the arabic language.

how can I do this?

The ”btn-menu” for default is showing on screens for max-width of 1024px.
How can i set up that the ”btn-menu” would show up to 900px screen width, and the mainnav will start showing starting 901px.

Thanks in advance!

I am trying to show a few divs right under the mainnav bar that show upcoming events. However, I want them only on the front page, but is_front_page() or is_home() aren’t working. How, can I set up a condition that loads the function only on the front_page of Zerif Lite’s theme?

I was wondering if you could help me out. Im trying to move my main.nav bar higher to my header logo.

here is the code, ive played around with the padding but doesnt seem to change the height, just the distance between content/logo.

Thanks!

/***** Navigation *****/

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; text-align:center; }
.main-nav li { display:inline-block }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 1.7px; padding: 12px 0; margin-right: 50px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
.tinynav { display: none; }

is it in the navigation or structure part of my css?

Thanks!

I was wondering if you could help me out. Im trying to move my main.nav bar higher to my header logo.

here is the code, ive played around with the padding but doesnt seem to change the height, just the distance between content/logo.

Thanks!

/***** Navigation *****/

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; text-align:center; }
.main-nav li { display:inline-block }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 1.7px; padding: 12px 0; margin-right: 50px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
.tinynav { display: none; }

is it in the navigation or structure part of my css?

Thanks!

/***** Navigation *****/

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; text-align:center; }
.main-nav li { display:inline-block }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 1.7px; padding: 12px 0; margin-right: 50px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
.tinynav { display: none; }

/***** Navigation *****/

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: center; position: relative; text-align: center; }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 1.7px; padding: 12px 0; margin-right: 50px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
.tinynav { display: none; }

Here is the code. Please help me out, much appreciated!

on my site www.cuckooavenue.com , I am trying to move my main.nav into the middle of the page. I think it will be presented better that way. So this what I think I should be adjusting

/***** Navigation *****/

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: left; position: relative; }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 2.7px; padding: 12px 0; margin-right: 50px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
.tinynav { display: none; }

When I changed the position from “left” to “center” it puts the titles on top of each other on the left side. But not in the middle of the page. I think Im missing something pretty simple.As im sure you can tell im new at this, any ideas would be greatly appreciated. Thanks!

I was wondering how i can get rid of the whitespace between the links in main nav. been using firebug to find the css code, but i can′t get a grip of it
I have changed the background color so you can see what space i mean.

joeymassa.com