• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

main and sub-navigation menus in prose – centre

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › main and sub-navigation menus in prose – centre

This topic is: not resolved

Tagged: centre, navigation, Prose, tagline

  • This topic has 8 replies, 3 voices, and was last updated 9 years, 1 month ago by dani2xll.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • April 6, 2016 at 12:25 pm #183062
    dani2xll
    Member

    Hi, I am trying to centre the website title, main and sub-navigation in one of the old themes 'prose'.

    Is there also a code to make the sub-menu vertical instead of horizontal?

    Also is there a code that will allow me to move the websites tagline closer to the website title.

    I have read many of the articles here and tried the solutions in my theme settings but none appears to be working for me.

    My website is http://dani2x.wpengine.com

    Thank you for your help.

    http://dani2x.wpengine.com
    April 7, 2016 at 8:15 am #183114
    dani2xll
    Member

    Can anyone help me with this please?

    Thank you for your help.

    April 7, 2016 at 9:40 am #183116
    GJudy
    Participant

    The tagline and title changes can be made in the CSS. I don't do this often enough to be certain, but I would begin with reducing the padding on the title area which should bring your description line (tag line) up. About line 117 in the CSS according to Notepad++/

    The navigation is probably going to take some php change which I am not experienced enough to get for you.

    Have you thought about using a different theme such as Sixteen-Nine?

    April 8, 2016 at 3:15 am #183151
    dani2xll
    Member

    Thank you for your help. I wish to keep using the Prose theme but thank you for your help.

    April 17, 2016 at 4:31 am #183766
    dani2xll
    Member

    Can anyone help me with this? I really can't move much forward with my site without being able to make this small change to the effects. my site is dani2x.wpengine.com

    Thank you for your help.

    April 17, 2016 at 5:02 am #183768
    Victor Font
    Moderator

    For the submenu, you need to change CSS in three places,

    First look for #subnav .wrap and add text-align: center; to it.

    #subnav .wrap {
        border: 0 solid #ffffff;
        text-align: center;
    }

    Next, remove the float from the unordered list element:

    #subnav ul {
        /* float: left; */
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    Last, remove the float from the list element:

    #subnav li {
        /* float: left; */
        list-style: none;
    }

    This will give you a vertical, centered menu. If you want the menu to remain horizontal, add display: inline-block to the previous code block:

    #subnav li {
        /* float: left; */
        list-style: none;
        display: inline-block;
    }

    Regards,

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

    April 17, 2016 at 9:27 am #183777
    dani2xll
    Member

    I made the above changes but it is having no effect. I thought it would be useful to send you the section I have on the sub-navigation menu before the changes. Thank you for your help.
    /* Secondary Navigation
    ------------------------------------------------------------ */

    #subnav {
    background: #f5f5f5;
    border: 1px solid #ddd;
    box-sizing: border-box;
    clear: both;
    color: #666;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 13px;
    margin: 0 auto;
    overflow: hidden;
    text-transform: uppercase;
    width: 100%;
    }

    #subnav .wrap {
    border: 1px solid #fff;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    text-align: center;
    }

    #subnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    }

    #subnav ul ul {
    border: none;
    }

    #subnav li {
    float: left;
    list-style: none;
    }

    #subnav li a {
    color: #666;
    display: block;
    margin: 0;
    padding: 7px 10px 6px;
    position: relative;
    text-decoration: none;
    }

    #subnav li a:active,
    #subnav li a:hover,
    #subnav .current_page_item a,
    #subnav .current-cat a,
    #subnav .current-menu-item {
    background: #444;
    color: #fff;
    }

    #subnav li a .sf-sub-indicator {
    display: block;
    height: 10px;
    overflow: hidden;
    position: absolute;
    right: 5px;
    text-indent: -9999px;
    top: 11px;
    width: 10px;
    }

    #subnav li li a,
    #subnav li li a:link,
    #subnav li li a:visited {
    background: #444;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    color: #fff;
    margin: 0;
    padding: 7px 10px 6px;
    position: relative;
    text-transform: none;
    width: 148px;
    }

    #subnav li li a:active,
    #subnav li li a:hover {
    background: #444;
    color: #fff;
    }

    #subnav li li a .sf-sub-indicator {
    top: 10px;
    }

    #subnav li ul {
    height: auto;
    left: -999em;
    padding: 0;
    position: absolute;
    width: 170px;
    z-index: 9999;
    }

    #subnav li ul a {
    width: 140px;
    }

    #subnav li ul ul {
    margin: -34px 0 0 169px;
    }

    #subnav li:hover ul ul,
    #subnav li:hover ul ul ul,
    #subnav li.sfHover ul ul,
    #subnav li.sfHover ul ul ul {
    left: -999em;
    }

    #subnav li:hover ul,
    #subnav li li:hover ul,
    #subnav li li li:hover ul,
    #subnav li.sfHover ul,
    #subnav li li.sfHover ul,
    #subnav li li li.sfHover ul {
    left: auto;
    }

    #subnav li:hover,
    #subnav li.sfHover {
    position: static;
    }

    April 17, 2016 at 12:01 pm #183788
    Victor Font
    Moderator

    Like I said, you have t remove the floats from the UL and LI elements.


    Regards,

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

    April 17, 2016 at 4:06 pm #183793
    dani2xll
    Member

    Thank you so much. It is working now. The code to display horizontally does not work but everything else does so thank you so very much for your kind help.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble