main and sub-navigation menus in prose – centre

[dani2xll]

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

[dani2xll]

Can anyone help me with this please?

Thank you for your help.

[GJudy]

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?

[dani2xll]

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

[dani2xll]

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.

[Victor Font]

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?

[dani2xll]

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;
}

[Victor Font]

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?

[dani2xll]

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