Nav Bar on Mobile Version of Theme

  • Unknown's avatar
    interactivarts · Member ·

    Hello i’m using wordpress for some time now but i’m fed up with a small simple problem i’m having. It relates to the mobile version of my theme when trying to look at different pages of the blog.

    On the mobile platform a small black box is the only thing that indicating that there are other pages to look at. I feel i should be able to have the word ‘menu’ typed in this box but i can’t find any input location. But I now realise there is no such place so I am asking for help to manually do this in CSS

    Much obliged
    Stephen

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

  • Unknown's avatar
    timethief · Member ·

    The mobile ready theme is default and a completely different theme that you do may NOT need to enable at all. Check here to see if you have a responsive layout theme https://theme.wordpress.com/themes/features/responsive-layout/

    A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    As I said above the mobile theme is a completely different theme. When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme

  • Unknown's avatar
    interactivarts · Member ·

    Thanks Timethief for the quick response however i have tried to disable the mobile theme before many times but i cant find any success and i end up getting a scaled down version of theme. Any other suggestions other than changing the theme altogether?

    Thanks

  • Unknown's avatar
    designsimply · Member ·

    You could add the word “menu” to the black box by adding the following to your Appearance > Customize > CSS editor:

    .menu-toggle:before {
	content: "menu";
	font-size: 14px;
	width: auto;
}

    Another possible update would be to make the menu on the Eventbrite Single theme appear expanded all the time. The @media line limits the change to small screens.

    @media (max-width: 767px) {
	.menu-toggle {
		display: none;
	}

	nav {
		display: block;
		opacity: 1;
	}

	#site-container {
		padding-top: 195px;
	}
}

    The 195px value would need to be adjusted if you ever add or remove items from the menu.

  • Unknown's avatar
    interactivarts · Member ·

    Thanks very much ive just given it ago although there are slight width issues with the “menu” text. Any ideas? I’ll mess around with it later and see if i can fix the width but i’m not very experienced.

  • Unknown's avatar
    designsimply · Member ·

    Just try changing the “width: auto” line to a pixel value like “width: 100px” and then adjust it until you find a width that you like.

  • The topic ‘Nav Bar on Mobile Version of Theme’ is closed to new replies.