Easy way to edit Genesis frontpage styles for individual items? Or help?

[fountainpen]

There's a particular menu item in my front page menu in Altitude Pro which I want surrounded by a white border... I'm having trouble figuring out how to do it. I know it's about adding some custom CSS class, but I'm not well-versed in it.

Is there a tool which makes this easy? I know Genesis Palette Pro allows wholesale changes to colors, typography, etc. -- but does it or any other software allow easy changes to individual elements like this, without having to know CSS?

Otherwise, I know I open up the custom CSS class option in menus, and have added it (in my case the custom class is "guidance-nav").

Then I've added this code to my style.css sheet:

.guidance-nav {
border: 5px solid white;
}

That doesn't seem to do anything, however...

[fountainpen]

Ok, I figured out how to address the right element -- li.guidance-nav instead of what I put above, but still can't get my border to be close enough to the text... Adding padding specifications to the class doesn't seem to change anything.

Sigh!

[Victor Font]

Please post a link to the site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[fountainpen]

http://www.siftingtothetruth.com/

[Victor Font]

As I understand it, you want the the border to be closer to the word "Guidance". First, look at your HTML that forms the menu item:

<li id="menu-item-827" class="guidance-nav menu-item menu-item-type-post_type menu-item-object-page menu-item-827" style="border: none;">
    <a href="http://www.siftingtothetruth.com/guidance/" itemprop="url">
        <span itemprop="name">Guidance</span>
    </a>
</li>

This HTML is composed of three elements: li, a, and span. Visualize this as three nested boxes. You added the guidance-nav class to the outer most box, the li item. This is the only place you can add a class through the WordPress menu editor.

From what you are asking, you want the border around the inner most box, the span element. There is no class for you to hook into though, but that's okay because we can apply a border to the span tag itself if you add this to style.css:

.guidance-nav span {
    border: 5px solid #fff;
}

Now you have a problem though. The border is touching the word guidance. There's no space whatsoever around the word. To add space, you have to add padding to the above CSS:

.guidance-nav span {
    border: 2px solid #fff;
    padding: 5px;
}

Once you add the padding, the menu grows both vertically and horizontally. This is because the middle box, the a element, is already padded and the padding added to the word guidance now pushes the middle box outward. How do we fix this, we have to reduce the middle box's padding to compensate for the added padding to the innermost box.

#menu-item-827 a {
    padding: 15px 10px;
}

Hope this helps.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[fountainpen]

That was very helpful, thank you! I would never have figured out the menu 827 thing...

[ngophuongquang]

thanks for your post.

---

Hiện nay Công ty Diên Vĩ cung cấp nhân sự cho marketing dược phẩm

[Author]

Posts