Hamburger menu size edit and display menu name?

Hello,

To change the hamburger icon size, please try the below CSS code.

#site-header.full_screen-header .menu-bar .ham:before, #site-header.full_screen-header .menu-bar .ham:after, #site-header.full_screen-header .menu-bar .ham {
    width: 30px;
    height: 2px;
}

To add the menu text, please try the below CSS code.

#site-navigation-wrap a.menu-bar:after {
    content: "MENU";
    font-size: 30px;
    padding-left: 20px;
}
#site-header.full_screen-header .menu-bar {
    font-size: 40px;
}

PS- you can change the values in the above code according to need.

it worked !!! thank you so much ! now the only problem is the alignment . they are a bit off

Hello,

You are most welcome and glad to know that solution worked well.

Tried checking and now getting properly aligned, seems you have managed to fix the issue.

i haven’t really fixed its a bit of a mess still:/

i also have a sticky header

my css:

#site-navigation-wrap a.menu-bar:before {
    content: "MENU";
    font-size: 30px;
    padding-right: 10px;
	
}

#site-header.full_screen-header .menu-bar .ham {
	margin-bottom: 7px;

}

#site-header-inner {

height:0px;
z-index:170;
margin:0 auto;

width:100%;
position:fixed;
top:0;
margin-top:20px;
}

• This reply was modified 3 years, 4 months ago by spyros12nik.

i added some and changed the margin botton now to this:

they seem alligned now but i dont think this is the proper way and also the logo is not allgined with the menu bar now.

#site-navigation-wrap a.menu-bar:before {
content: “MENU”;
font-size: 28px;
padding-right: 10px;

}

#site-header.full_screen-header .menu-bar .ham {
margin-bottom: 15px;
}
#site-header.full_screen-header .menu-bar .ham:before, #site-header.full_screen-header .menu-bar .ham:after, #site-header.full_screen-header .menu-bar .ham {
width: 25px;
height: 3px;
}

#site-header-inner {

height:0px;
z-index:170;
margin:0 auto;

width:100%;
position:fixed;
top:0;

Hello,

Tried checking now everything looks good to me.
And we have added the text with the Custom CSS, so it needs some CSS to make then align.

Another way is you can copy the full-screen-header.php file into the child theme and edit/add the text according to need.
You will get that header file by following the path: /themes/oceanwp/partials/header/style