HEADER : MENU with background

  • Resolved cd_BE

    (@cd_be)


    10 years, 9 months ago

    So I created a custom menu for my theme with a background.

    The idea is that the menu floats above this background. I have it kind of working.
    but the menu text floats to high and I can’t seem to change that.

    The image is 300x300px and the menu should be 200×150 within this image.

    I have this:
    https://i62.tinypic.com/ifoaoo.png

    And it should be this:
    https://i62.tinypic.com/15cg97c.png

    I thought I had it with this code, but I have it wrong somewhere. 

    /*** HEADER : MENU ***/

/* To see a menu in your header, you'll need to first add one in WordPress Admin */
.menu ul
{
    list-style: none;
    margin: 0;
}
.menu ul ul
{
    display: none;
}
.menu li
{
    display: inline;
    float: left;
	padding: 0 10px 8px 0;
}
.menu-item
{

}
.menu-item a

{
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
	text-decoration: none;
	color: #357bb9;
	line-height: 10px;
}
.menu-item a:hover
{
	color: #357bb9;
	text-decoration:underline
}

/* = Menu backgorund
------------------------------------------- */

#access {
			background-image:url('img/menu_BG.png');
			background-repeat:no-repeat;
			display: block;
			float: right;
			margin: 0 auto;
			width: 300px;
			height: 300px;
		}
Viewing 1 replies (of 1 total)
  • Thread Starter cd_BE

    (@cd_be)

    Added padding and changed te font-size of the menu items and the line-hight.

    Problem solved… It is really a long time since I wrote .css or php. I have forgotten a lot ??

    This is what I have no and is working, maybe it can help somebody someday :p

    /*** HEADER : MENU ***/

/* To see a menu in your header, you'll need to first add one in WordPress Admin */
.menu ul
{
    list-style: none;
    margin: 0;

}
.menu ul ul
{
    display: none;
}
.menu li
{
    display: inline;
    float: left;
	padding: 0 10px 8px 0;
}
.menu-item
{

}
.menu-item a

{
	font-size: 15px;
	font-family: Verdana, Geneva, sans-serif;
	text-decoration: none;
	color: #357bb9;
	line-height: 17px;
}
.menu-item a:hover
{
	color: #357bb9;
	text-decoration:underline
}

/* = Menu achtergrond
------------------------------------------- */

#access {
			background-image:url('img/menu_vonk.png');
			background-repeat:no-repeat;
			display: inline;
			float: right;
			margin: 0 auto;
			width: 300px;
			height: 300px;
			padding: 70px 0 0 0;

		}
Viewing 1 replies (of 1 total)
  • The topic ‘HEADER : MENU with background’ is closed to new replies.