Make a static menu with CSS

  • Unknown's avatar
    lalou06 · Member ·

    I would like to modify my menu bar into a static one that takes all the width of the screen when we scroll down, no matter which device is being used.

    At the moment, only part of the header and menu bar is showing (not using all the width), and the content of the page is visible behind the top part when scrolling down (it should go invisible as we scroll down)

    Also, I wand my logo to slide in the left corner and align with the menu bar when scrolling down, what am I doing wrong ?

    @media screen and (min-width: 960px) {
	#page {
		position: relative;
	}

	.site-header {
		position: fixed;
		top: 32px;
		z-index: 1;
		background: #fff;
	}

	.site-content {
		margin-top: 100px;
	}
}

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Your site is private so it’s hard for volunteers to help. What theme are you using? I can always apply your custom CSS to the theme demo site and see if I can help based on the results of that.

  • Unknown's avatar
    lalou06 · Member ·

    Hi, thanks for getting back to me, i was using Sela. I made it public now so you can view, but I think by using another theme I managed to have the visual I wanted (yes !!)
    Now I need to amend the font styles of the pages and manage to find a way to remove the top header, any idea ? (the pink one at the top of the page)

    Thanks !!

  • Unknown's avatar
    hallluke · Member ·

    You can get rid of the topmost section showing your site description by going to the CSS section of the customiser and adding this code:

    #masthead .top-bar {
  display: none;
}

    You should also test out the fonts available in the (you guessed it!) Fonts section of the customiser first as these will get loaded with your site so be available to almost all your visitors. If you don’t like any of them or want to apply the fonts you’ve selected to different sections of your site let me know the specifics and I can help with the CSS.

  • Unknown's avatar
    lalou06 · Member ·

    Amazing, this worked well ! thank you !
    For the fonts, I found the type I wanted, but want the one in the pages to be the same size as the one on the front page. For some reason, the font of the front page is a lot bigger.
    Do you know how to fix this?

  • Unknown's avatar
    hallluke · Member ·

    You can match the front page text (which your theme increases as part of a style choice) to match the other pages by adding this to your CSS:

    .page-template-front-page .site-main > .hentry:first-of-type .entry-content {
	font-size: 16px;
}
@media screen and (min-width: 768px) {
	.page-template-front-page .site-main > .hentry:first-of-type .entry-content {
		font-size: 18px;
	}
}
  • Unknown's avatar
    lalou06 · Member ·

    Thanks a lot, all done !

  • The topic ‘Make a static menu with CSS’ is closed to new replies.